I have a page containing a bootstrap table, using the following code:
<table class="display table table-bordered table-striped w-100"
data-click-to-select="true" data-unique-id="NoticeID"
data-pagination="true" data-sortable="true" data-page-size="10"
data-single-select="true" data-maintain-selected="true"
data-id-field="NoticeID" id="notices" name="notices">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="NoticeID" data-sortable="true">ID</th>
<th data-field="Title" data-sortable="true">Title</th>
<th data-field="TimesViewed" data-sortable="true">Views</th>
<th data-field="IsActive" data-sortable="true">Active</th>
</tr>
</thead>
</table>
In my page load script, I call the following function which uses an AJAX call to populate the table with data:
function loadNotices() {
$.ajax({
url: '../handlers/getusernotices.ashx',
data: null,
method: 'post',
dataType: 'json',
success: function (data) {
$('#notices').bootstrapTable({
data: data.Notices
});
$('#notices').bootstrapTable('load', data.Notices);
},
error: function (e) {
console.log(e.responseText);
}
});
}
Everything works just fine, except for one little odd thing: Looking at the screenshot below, you'll notice that the 'Loading, please wait...' message that the bootstrap table displays while data is being loaded never goes away, even after the data has been loaded:
Am I missing something that I need to do once the table is loaded to accomplish this?
You have to include bootstrap's table css in your html file.
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table#1.20.2/dist/bootstrap-table.min.css">
If this doesn't work, try to include this js script after the rest of the scripts
<script src="https://unpkg.com/bootstrap-table#1.20.2/dist/bootstrap-table.min.js"></script>
Links from here
In order to populate a table through AJAX, one option is to follow the example provided by the documentation.
Analysing how the code works, you may notice that it calls the ajax function which receives params as argument. With that, you have to pass an object with the following structure:
{
rows: [
{ yourDataHere } , ...
]
}
And those columns have to correspond to the ones you described in the HTML through the data-field attribute. You can see this in action in the running example.
Related
Hello guys I hope you can help me, I'm using bootstrap table to order the data from json query, specially this source example and I'm using chrome:
<link href="https://unpkg.com/bootstrap-table#1.16.0/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/bootstrap-table#1.16.0/dist/bootstrap-table.min.js"></script>
<table
id="table"
data-toggle="table"
data-flat="true"
data-search="true"
data-url="http://127.0.0.0:8000/hello">
<thead>
<tr>
<th data-field="field.name" data-sortable="true">Name</th>
<th data-field="field.count" data-sortable="true">Stargazers</th>
<th data-field="field.count.forks" data-sortable="true">Forks</th>
<th data-field="field.description" data-sortable="true">Description</th>
</tr>
</thead>
</table>
This works fine, the problem is that If I try to re order data that previously I edit the dome with a for it shows again the data in the json object and order the row.
I think, for some reason I need to append data to the json object the server responses, the issue is that I can not see where is or which is the variable name where boostap table storage this information, I can see the json in the network option "in chrome" but I need to get the name variable to append more data.
It would help me a lot to know how to get this, any idea ?
I am trying to do some filtering (using bootstrap-table by wenzhixin) on a table I have being populated via JSON.
Part of HTML:
<button class="btn btn-primary" id="filterBtn">Filter</button>
<div class="container">
<table class="table table-bordered table-hover" id="table">
<thead>
<tr>
<th data-field="make">Make</th>
<th data-field="model">Model</th>
<th data-field="year">Year</th>
</tr>
</thead>
</table>
</div>
Part of JS:
// JSON file is input from a successful AJAX call.
function populateTable(json) {
$('#table').bootstrapTable({
data: json
})
}
// a button is click in html which calls this function.
function filterBy(model) {
console.log("filterBy is called");
$('#table').bootstrapTable('filterBy', {
make: [model]
});
}
The table populates correctly with all the data but once I hit the button I see that filterBy() is called but all that happens is it looks like the page refreshes but all the data in the table is still there like no filtering ever occurred.
I've tried changing make: [model] to make: ["Honda"] just as a test and it still doesn't work. It still performs the same behavior of refreshing the page with all the data still in tact.
Not sure what I am doing incorrectly.
https://github.com/wenzhixin/bootstrap-table/commit/de867d379a46b377efa7eef83fdf898b9073b28c
This is an issue i think after feature version: 1.11.0. Check the bootstrap-table.js and find this. I hope its will solve your problem. Good Luck!
From the the controller I am passing a json encoded object to my view. In the view i have used bootstrap table to display the data. However in the table it show No matching records found. Please help.
here is my controller
enter image description here
here is my view
enter image description here
I guess your model is roommaster. To get Eloquent model to json use
$roommaster->toJson()
because json_encode($roommaster) needs $roommaster to be an array and in your case is an object
Have you checked the source code of the page the table is on to see if the code is outputting JSON to data-url?
If it is, I think the issue isn't with the PHP code but the table itself. Try adding this to the blade template and getting rid of data-url from your table.
Code for table:
<table class="table table-hover" data-click-to-select="true">
<thead>
<tr>
<th data-field="id" data-checkbox="true">ID</th>
<th data-field="roomname">Room name</th>
<th data-field="Desc">Description</th>
<th data-field="price">Price</th>
</tr>
</thead>
</table>
Code to populate table with data:
<script>
var $table = $('.table.table-hover');
$(function () {
var data = {!! $roomname !!};
$table.bootstrapTable({data: data});
});
</script>
I have been trying to a table to get populated by using data from a ajax request. I have been following this tutorial as the starting point.
I have created a PHP web service that when queried:
table_ws.php?id=2
Returns the data in the following format:
{"status":200,"status_message":"Yahoo!","data":[{"sent_date":"2012-01-01","serial_number":"342312","text":"Great service","looked_into":"0"},{"sent_date":"2012-02-16","serial_number":"2343662","text":"Happy with the product","looked_into":"0"},{"sent_date":"2012-03-04","serial_number":"342356","text":"Experience could have been better","looked_into":"0"}]}
I have created the table in HTML like so:
<table id="tbl_details" class="tbl">
<thead>
<tr>
<th>Sent Date</th>
<th>Number</th>
<th>Text</th>
<th>Resolved?</th>
</tr>
</thead>
</table>
The relevant parts of my javascript are as follows (for the sake of clarity I am excluding the code not relevant for the question):
...
...
...
.on("click", function(d) {
table.ajax="table_ws.php?id=" + d.id
table.columns=[
{"data": "sent_date"},
{"data": "serial_number"},
{"data": "text"},
{"data": "looked_into"}
];
});
...
...
...
$(document).ready( function () {
table=$('#tbl_details').DataTable();
table.processing=true;
table.serverSide=true;
});
Though the table appears as expected on the page, it is not populated "onclick" of the button.
The answer to this question on StackOverflow says that the table needs to be destroyed and recreated everytime new data is put in. But the function fnDestroy() does not seem to exist.
How do I get around this problem?
im using PrototypeJS for my project, i used Ajax.PeriodicalUpdater, inserts in realtime as i wanted, but it doesn't replace the data inside my table here is the html code
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<th id="products"></th>
</tr>
</table>
And here is the code for the js
new Ajax.PeriodicalUpdater('products', 'test.php',
{
method: 'get',
insertion: Insertion.Top,
frequency: 1,
decay: 1
}
);
But the result it's bad, it adds and adds everytime the same data, it doesn't replace, what im doing wrong?
Well, you're inserting, so it... inserts.
FYI, Insertion.Top is deprecated in favor of Element#insert, but what you'd want is Element#replace.
However, the default is to replace--by specifying an insertion property you're overriding the default. See the Updater docs for more details.