We Keep Coding

Getting Sorting Order of Table

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");
});

Bootstrap-Table filterBy Not Working

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!

Datatable sScroll is creating duplicate datatables

I am facing issue in Datatable sScroll Property.
I have defined the datatable in my html file like below
<table id="datatable" class="vrptTable">
<thead>
<tr>
<th> column1</th>
<th>Column 2</th>
</tr>
</thead>
</table>
and I am populating this datatable in my js file as below :
var options = new DataTableOptions($table, {
"sAjaxSource" : ajaxSource,
"sAjaxDataProp" : "aaData",
"sScrollY":"200px"
}).getOptions();
$("#table").dataTable(options)
;
The problem is it's creating the vertical scroll bar but i can see 2 tables in HTML DOM. First one contains only header information and second datatable contains empty header and my data.
Can anyone please help.

This is absolutely normal behavior of jQuery DataTables. See this official example, there are two tables - one for the header, another one for the body.

how to pass json object to bootstrap-table?

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>

How does data-sort-name in Bootstrap table Js work?

I am using folowing library : http://bootstrap-table.wenzhixin.net.cn/documentation/
I load json objects into this table which works fine, but now here comes the problem. I want to be able to sort columns.
My Json layout as folows :
[{"Total": 12345.56, "Name": "Monkey1", "TotalFormatted": "$ 12.345,56"},{"Total": 13345.56, "Name": "Monkey3", "TotalFormatted": "$ 13.345,56"},{"Total": 11345.56, "Name": "Monkey2", "TotalFormatted": "$ 11.345,56"}]
<table id="test" data-page-size="10" data-pagination="true" data-unique-id="true" data-show-footer="false">
<thead>
<tr>
<th data-field="Name">Name</th>
<th data-field="TotalFormatted" data-sort-name="Total" data-sortable="true" data-align="right">TotalFormatted</th>
</tr>
</thead>
</table>
I want to show TotalFormatted data, but i want to sort this column with Total property, since TotalFormatted cant be used for that. In the documentation i saw the following :
data-sort-name : Provide a customizable sort-name, not the default
sort-name in the header, or the field name of the column. For example,
a column might display the value of fieldName of "html" such as
"abc", but a fieldName to sort
is "content" with the value of "abc".
but how ever data is not sorted correctly, has anyone exprienced this or have i misunderstood something?

Actually data-sort-name doesn't work that way. the main intention of data-sort-name option is to control the default sorting of the table data.
for the data-sort-name option to work with default sorting it needs to point to one of the data-field attribute of the column in the table.
note : In short data-field is like a an id added to each column, which the data-sort-name option refers to sort the table on load.
To understand this better, here is an example with code from Bootstrap site
try changing the data-sort-name to one of the columns data-field value and execute the code, you will understand what I just explained above.
HTML Code:
<table data-toggle="table"
data-url="https://api.github.com/users/wenzhixin/repos?type=owner&sort=full_name&direction=asc&per_page=100&page=1"
data-sort-name="stargazers_count"
data-sort-order="desc">
<thead>
<tr>
<th data-field="name"
data-sortable="true">
Name
</th>
<th data-field="stargazers_count"
data-sortable="true">
Stars
</th>
<th data-field="forks_count"
data-sortable="true">
Forks
</th>
<th data-field="description"
data-sortable="true">
Description
</th>
</tr>
</thead>
Live demo # JSFIDDLE: http://jsfiddle.net/dreamweiver/ptxj8Lao/