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!
Related
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.
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 want to save the sorting order of the table and when refreshed it should sort on the saved status.
I am using the Tablesorter jquery plugin for sorting of table
I used javascript to store them in the localstorage but it is storing entire table
javascript Code :
$("#videoTable").on("sortEnd", function SaveSortOrder() {
var table_layout = $('#videoTable')[0].innerHTML;
localStorage.setItem("tableLayout",table_layout);
});
HTML Code:
<table class="table sortable" id="videoTable">
<thead>
<tr valign="middle">
<th data-sort="name" class="tooltipPoint col-lg-4" style="text-align:left;">Name <i class="fa fa-sort" aria-hidden="true"></i></th>
<th data-sort="name" class="tooltipPoint text-center" nowrap>Status <i class="fa fa-sort" aria-hidden="true"></i></th>
<th class="unclickable text-center">Action</th>
</tr>
</thead>
<tbody>
The body will be generated dynamically.
</tbody>
</table>
Is there any way to retrieve only the headers or only the column (Index of the column in a table) we are sorting so that I can modify the class based on the result.
Sorry for bad English. Thanks in advance.
Sort column. Save only what column how sorted (dont know how to get current sort from tablesorter)
On page load check if any sort is saved in local storage.
If so, apply it with sortList.
You should consider new data may be added. Thats why your solution is not right.
I am not sure if I understood your question correctly, but if you want to add a class to the column that was sorted you could manage that at the table header level, something along the lines of this:
jQuery("#videoTable th.tooltipPoint").on("click",function(){
jQuery("#videoTable th.tooltipPoint").removeClass("sorted");
jQuery(this).addClass("sorted");
});
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>
Im new to jquery and need some help.
I have written a table that act like a grid with help from jquery.
When a user click on Name column the user will be redirected to the details page.
Now I want to know if I can do this in a better way?
And should the JS code be in the page or in a separated JS file?
Here is the code.
<table id="grid">
<thead>
<tr>
<th data-field="name">Namn</th>
<th data-field="location">Ort</th>
<th data-field="phone">Telefon</th>
<th data-field="buildinmonth">Bygga inom</th>
<th data-field="houselot">Har tomt</th>
<th data-field="created">Skapad</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td><span id="open" data-id="#item.Id">#item.Name</span></td>
<td>#item.Location</td>
<td>#item.Phone</td>
<td>#item.BuildInMonth</td>
<td>#item.HouseLot</td>
<td>#String.Format("{0:d}", item.CreatedDate)</td>
</tr>
}
</tbody>
</table>
<script>
$("#grid").kendoGrid({
scrollable: false,
sortable: true
});
$("#grid #open").click(function () {
window.location.replace("/lead/details/" + $(this).data("id"));
});
</script>
In this scenario, dont need to use any jquery click event, when the html table is loading that time we can give a <a> tag like,
<td>#item.Name</span></td>
When a user click on Name column the user will be redirected to the details page. Now I want to know if I can do this in a better way?
This seems ok. The only thing I feel can be adde to this is on hover of the Name column, you can show a tooltip of "Show more details" or something more intuitive.
And should the JS code be in the page or in a separated JS file?
Yes I always prefer to have all my JS code in a seperate file. The advantage of doing so is that you can minify the JS code later on.