i want to use the bootstrap-table library from wenzhixin (http://bootstrap-table.wenzhixin.net.cn/) but my skills seem not be as good enough that i can get the script running.
I want the table to be supplied with data via ajax.
Here's the code which works (example from the source page):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>SL Time</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Table -->
<link href="css/bootstrap-table.css" rel="stylesheet">
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Bootstrap Table -->
<script src="js/bootstrap-table.js"></script>
<script src="js/bootstrap-table-de-DE.js"></script>
</head>
<body>
<div class="container">
<table id="table"
data-toggle="table"
data-height="460"
data-search="true"
data-ajax="ajaxRequest"
data-side-pagination="server"
data-pagination="true">
<thead>
<tr>
<th data-field="nummer">Nummer</th>
<th data-field="name">Name</th>
</tr>
</thead>
</table>
</div>
<script>
// your custom ajax request here
function ajaxRequest(params) {
// data you need
console.log(params.data);
// just use setTimeout
setTimeout(function () {
params.success({
total: 100,
rows: [{
"nummer": 0,
"name": "Item 0",
}]
});
}, 1000);
}
But i want the data coming from my page "ajax_loader.php" which looks like this:
<?php
$data=array();
array_push($data, array('nummer' => '1', 'name' => 'daniel'));
array_push($data, array('nummer' => '2', 'name' => 'thomas'));
echo json_encode($data);
?>
But how do i get the following piece of code get to fill the table (as the sample function does):
$.ajax({
type: "POST",
url: "ajax_loader.php",
data: "user-id=1",
success: function(data) {
// At this position my knowledge ends ;-(
}
});
Can anyone help me, get the thing working?
Best regards
Daniel
The documentation is your friend ^^ (moreover with an example : http://issues.wenzhixin.net.cn/bootstrap-table/index.html#options/custom-ajax.html).
Seriously, here is the solution :
The HTML :
<div class="container">
<table id="table"
data-toggle="table"
data-height="460"
data-search="true"
data-ajax="ajaxRequest"
data-side-pagination="server"
data-pagination="true">
<thead>
<tr>
<th data-field="nummer">Nummer</th>
<th data-field="name">Name</th>
</tr>
</thead>
</table>
</div>
The script :
// your custom ajax request here
function ajaxRequest(params) {
// data you may need
console.log(params.data);
$.ajax({
type: "POST",
url: "ajax_loader.php",
data: "user-id=1",
// You are expected to receive the generated JSON (json_encode($data))
dataType: "json",
success: function (data) {
params.success({
// By default, Bootstrap table wants a "rows" property with the data
"rows": data,
// You must provide the total item ; here let's say it is for array length
"total": data.length
})
},
error: function (er) {
params.error(er);
}
});
}
params.success is function! You need more params, like this
function ajaxRequest(params) {
$.ajax({
type: "POST",
url: "/gruzin/getdb",
success: function (data) {
console.log(data);
params.success({
"rows": data,
"total": data.length
},null,{});
},
error: function (er) {
params.error(er);
}
});
}
Related
I need help, I have an api and access key. "https://api-redemet.decea.mil.br/mensagens/metar/SBKP?api_key=XXXXX". When I call right into the browser it returns the information in Json.
I need to get a tag from the return calls "mens": that returns this updated data from hourly "METAR SBKP 290100Z 13012KT CAVOK 18/14 Q1020="
A friend helped me with another API of the same style where he created a local html capturing some tags.
Html that i use today.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Metar</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function(){
$.ajaxSetup({ cache: false });
setInterval(function() {
$.getJSON('https://api.radarbox.com/v2/airports/SBKP/metar', { bearerToken: "XXXXXXXX" })
.done(function(data) {
var text = `<table>
<tr style="background-color: #C4C4C4">
<td><span style="color: rgb(255, 255, 0);"><strong>Metar SBKP ${data.apiMetar.observationTime}</strong></span></td>
</tr>
</table>`
$(".mypanel").html(text);
});
}, 9000);
});
</script>
</head>
<body>
<div class="mypanel"></div>
</body>
</html>
The new API returns:
{"status":true,"message":200,
"data":
{"current_page":1,
"data":[{"id_localidade":"SBKP","validade_inicial":"2021-04-29 01:00:00","mens":"METAR SBKP 290100Z 13012KT CAVOK 18\/14 Q1020=","recebimento":"2021-04-29
I need get this information "mens": "METAR SBKP 290100Z 13012KT CAVOK 18/14 Q1020="
and write to html changing ${data.apiMetar.observationTime}
Other question, first Api use bearerToken and the new?
Api Information --> https://ajuda.decea.mil.br/base-de-conhecimento/api-redemet-mensagem-metar/
Tks for Help
Assume this is your JSON object
{
"status":true,
"message":200,
"data":
{
"current_page":1,
"data":[{
"id_localidade":"SBKP",
"validade_inicial":"2021-04-29 01:00:00",
"mens":"METAR SBKP 290100Z 13012KT CAVOK 18\/14 Q1020=",
"recebimento":"2021-04-29
}]
}
The updated code should be something like this:
$.getJSON('https://api.radarbox.com/v2/airports/SBKP/metar', { bearerToken: "XXXXXXXX" })
.done(function(data) {
var text = `<table>
<tr style="background-color: #C4C4C4">
<td><span style="color: rgb(255, 255, 0);"><strong>Metar SBKP ${data.data[0]['mens']}</strong></span></td>
</tr>
</table>`
$(".mypanel").html(text);
});
Thanks for the help. I'm not a developer so I get caught up with it kkkkkkkk
I changed my HTML with this call but does not display anything. I don't know if I'm passing the right call from api_key the old one was:
$.getJSON('https://api.radarbox.com/v2/airports/SBKP/metar', { bearerToken: "ac3e1a8bXXXXXXX" }) and the new one from what I saw informs you directly in the URL , may be that I'm informing wrongly, I'm informing thus: $.getJSON(https'api-redemet.decea.mil.br/mensagens/metar/SBKP?api_key=FEG1OXXXXXXXX'})
Html is now:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Metar</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function(){
$.ajaxSetup({ cache: false });
setInterval(function() {
$.getJSON('https://api-redemet.decea.mil.br/mensagens/metar/SBKP?api_key=FEG1OXXXXXX'})
.done(function(data) {
var text = `<table>
<tr style="background-color: #C4C4C4">
<td><span style="color: rgb(255, 255, 0);"><strong>Metar SBKP ${data.data[0]['mens']}</strong></span></td>
</tr>
</table>`
$(".mypanel").html(text);
});
}, 1000);
});
</script>
</head>
<body>
<div class="mypanel"></div>
</body>
</html>
I am using Jquery Data table to show my data, which cames from an ajax call and a json file.
I'm using two tables, the first one (#list1) shows data from sql, the second one (#list2) is filled when I click on one of the rows in the first table (a click event). I was strougeling with the reload data, I used clear() and draw() to reload the table, but after using this, the second table (#list2) stop displaying the info, only if you go and click on it will appear the data. I guess ist the way I'm reloading the tables but no other method has work for me.
Here is my jquery code:
$(document).ready(
function()
{
$('#list1').DataTable(
{
dom: 'lfrtipB', //elementos del DOM y orden
buttons: ['csv', 'excel', 'pdf', 'print']
});
$('#list2').DataTable(
{
responsive: true,
searching: false,
});
$("#list1 tr").click(
function ()
{
var cod = ($(this).find("td:first").text());
$.ajax({
url: 'https://www.urlblabla.php',
data: {
action: 'usuario',
idfiltro: cod
},
type :'post',
success: function(sql)
{
var t= $('#list2').DataTable().clear().draw();
$.each(JSON.parse(sql), function(idx, opt)
{
t.row.add([ opt.1, opt.2,opt.3,opt.4]).draw(); //this was my mistake I add the draw() method
});
}//endsuccess
}); //endajax
}//end function
);//end click
}
);//fin document ready
I tried to use the reload() function but the browser gives me a function not found error
And here is my html code (quite simple)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/jquery-ui-1.10.2.custom.min.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"/>
<link href="libreriasWS/dataTables.bootstrap5.min.css"rel="stylesheet" type="text/css"/>
<link href="libreriasWS/jquery.dataTables.min.css"rel="stylesheet" type="text/css"/>
<link href="libreriasWS/datatable_style.css"rel="stylesheet" type="text/css"/>
<link href="libreriasWS/buttons.dataTables.min.css"rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery-3.5.1.js"></script>
<script type="text/javascript" src="libreriasWS/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="libreriasWS/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="libreriasWS/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
</head>
<body>
<center>
<div id="content" class="container">
<div class="datatable-inner table-responsive ps ps--active-x">
<h4>Users</h4>
<table id="list1" class="table datatable-table hover">
<thead class="datatable-header">
<tr>
<th>ID</th>
<th>name</th>
<th>Line</th>
</tr>
</thead>
<tbody>
<?php
$cli = $soapClient->getData("","array_data","");
$result_array = json_decode($cli);
for ($i=0; $i < count($result_array); $i++)
{
print '<tr>';
print '<td>'.$data_array[$i]->{'Id'} .'</td>';
print '<td>'.$data_array[$i]->{'name'} .'</td>';
print '<td>'.$data_array[$i]->{'line'} .'</td>';
print '</tr>';
}//finfor
?>
</tbody>
</table>
</div>
<div class="datatable-inner table-responsive ps ps--active-x">
<h6>Users</h6>
<table id="list2" class="table datatable-table hover">
<thead class="datatable-header">
<tr>
<th>ID</th>
<th>Descripcion</th>
<th>MAC</th>
<th>Cliente</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<br/>
</div> <!--Fin Tab Content-->
</div> <!--Fin Tab Content contaniner-->
</center>
</body>
If you're trying to clear and repopulate the second DataTable when you click on a different row in the first table, you'll need 'destroy: true' in your initialisation. You can add an Ajax call in the DataTable initialisation as well.
It might be better to have the second table initialised in a separate function, then pass the variable from table 1 as a parameter e.g.
$(document).ready(function () {
$("#list1 tr").click( function () {
var cod = ($(this).find("td:first").text());
SecondTableInitialise(cod);
});
});
function SecondTableInitialise(cod) {
$("#table2").DataTable({
"ajax": {
"url": "methodURL" + cod,
"dataSrc": "tableSource"
},
"columns": [
{ "data": "Column1Data" },
{ "data": "Column2Data" },
{ "data": "Column3Data" }
],
"destroy": true
});
}
So I want to try to make a website that includes charts. I used chart.js for it. Now i try to make two charts so i copied the one i make before and changed its variable but it doesn't shown up on my html page. What i want to ask is, is it possible to make 2 charts using chart.js and I did it the wrong way or i only can make one chart? Thank you.
By the way, here's my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<title>Chart Page</title>
</head>
<body>
<div class="container">
<canvas id="myChart"></canvas>
<canvas id="myChart2"></canvas>
</div>
<script>
let myChart = document.getElementById('myChart').getContext('2d');
let massPopChart = new Chart(myChart, {
type: 'bar',
data: {
labels:['Boston', 'Worcester', 'Springfield', 'Lowell', 'Cambridge', 'New Bedford'],
datasets:[{
label : 'Population',
data: [
617594,
181045,
153060,
106519,
105162,
95072
],
}]
},
options : {},
});
</script>
<script>
let myChart2 = document.getElementById('myChart2').getContext('2d');
let massPopChart = new Chart(myChart2, {
type: 'bar',
data: {
labels:['Boston', 'Worcester', 'Springfield', 'Lowell', 'Cambridge', 'New Bedford'],
datasets:[{
label : 'Population',
data: [
617594,
181045,
153060,
106519,
105162,
95072
],
}]
},
options : {},
});
</script>
</body>
You are using the same variable name for both of the charts that is massPopChart. You just need to change the variable name to massPopChart1 and massPopChart2.
Just check out the proper working here https://jsfiddle.net/4gdtujve/
After several hours of research on google, I have not managed to find a tutorial that shows how to use vue.js to display the result of a sql query (for example SELECT in my case). I come to you because i need to know how i can retrieve and display the data back by the spring findAll () method in an html page with framwork vue.js.
Thank you in advance for your help.
Here is the html file in which I would like to display the data:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>List of school</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div id="test">
<h1>Result</h1>
<tr>
<td/>ID</td>
<td/>Description</td>
</tr>
<tr v-for="item in panier">
<td>{item.id}</td>
<td>{item.description}</td>
</tr>
</div>
<script src="http://cdn.jsdelivr.net/vue/1.0.10/vue.min.js"></script>
<script>
new Vue({
el: '#test',
data: {
panier: [
{ id: "1", description: "University"},
{ id: "2", description: "high school"}
],
}
});
</script>
</body>
</html>
The problem I do not know how to fill my basket with the data returned by the findAll () method of spring.I specify that this method returns me the data in JSON format. Like this :
{
id:1,
description:"University"
}
{
id:,
description:"University"
}
Here is my getAllType method :
#RequestMapping(value= "/getAllTypes", method = RequestMethod.GET)
public #ResponseBody Collection<Type> getAllTypes() {
return this.typeService.getAllTypes();
}
Please if possible with an example of how I should proceed.
I know there's quite a lot of info already on stackoverflow regarding ngTable/AngularJS, but I tried everything, and it just doesn't work.
my html is this:
<!doctype html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>Sequencing experiments overview</title>
<script src="/LIMS/angular-1.2.14/angular.js"></script>
<script src="/LIMS/js/controllers.js"></script>
<script src="/LIMS/ng-table-master/ng-table.js"></script>
<link rel="stylesheet" href="/LIMS/ng-table-master/ng-table.css" />
<link data-require="bootstrap-css#*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="/LIMS/style.css" />
</head>
<body ng-app="dataOverview" ng-controller="searchCtrl">
<div>
Search: <input ng-model="query">
<p><strong>Page:</strong> {{tableParams.page()}}
<p><strong>Count per page:</strong> {{tableParams.count()}}
<table ng-table="tableParams" class="table">
<tr ng-repeat="exp in $data | filter:query">
<td data-title="'id'">
{{exp.id}}
</td>
<td data-title="'name'" sortable ="'name'">
{{exp.name}}
</td>
<td data-title="'Type'">
{{exp.type}}
</td>
</tr>
</table>
</div>
</body>
</html>
my controller.js file is this:
var dataOverview = angular.module('dataOverview', ['ngTable']);
dataOverview.controller('searchCtrl', function searchCtrl($scope, $http, ngTableParams) {
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 5 // count per page
},{
getData: function($defer,params) {
$http.get('/LIMS/index_query.php').
success(function(data, status) {
var orderedData = data;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(),params.page() * params.count()));
})
}
})
});
The index_query.php returns a valid JSON object queried from a MySQL DB (will not show this here).
So, this code is almost ok i guess. It displays a table with columns and values from the DB. I can filter using the value in the filter box. However, it only shows 5 rows, and there are no buttons to go to the next 5 rows or increase the number of rows on the page. As described on the ngTable page (http://bazalt-cms.com/ng-table/example/1).
When checking console with firebug, I see an 'Uncaught TypeError: Cannot call method 'push' of undefined ' error. I assume it;s an error populating the array which should build the buttons to go from 1 page with 5 records to another? I wasted 10h on this today, so please enlighten me, I would be very grateful.