We Keep Coding

Tablesorter - filter-select and filter_saveFilters

I have a table with filters rendered as select boxes and the option that the filter is saved between page reloads. Works so far. Here is the relevant part of my code:
<script>
$('.tablesorter').tablesorter({
widgets: ["saveSort", "filter", "zebra"],
widgetOptions: {
filter_saveFilters : true,
saveSort: true
}
});
</script>
<table class="table tablesorter" data-sortlist="[[1,0]]">
<thead>
<tr>
<th data-filter="false" data-sort="false">Image</th>
<th>Name</th>
<th class="filter-select">Status</th>
</tr>
</thead>
<tbody> ... </tbody>
</table>
Here comes the problem: First page load - filter status for "error" (select-box) results in one table row displayed. Then I fix the error and reload the page. Now all rows are filtered out, but the status filter select-box is empty (does not contain the active filter "error", thus displays an empty string).
That means that the displayed filter and the displayed table rows do not match, which is a problem.
When I activly select the empty value in the status filter, all rows get displayed again.
Any ideas how to handle this issue? Thanks for your solutions :)

How to check whether cells in a particular column of a html table is empty using Jquery?

I have a html page in my web application where there are several forms and tables.
In following column 'Advert Id' is mandatory to be filled.
<table id="mf-table" class="table table-hover">
<tbody>
<tr>
<th>File Name</th>
<th>Duration</th>
<th>Category</th>
<th>Comment</th>
<th>Advert Name</th>
<th>Advert Id</th>
</tr>
The content of the above table is to be added.
I want to check whether all the cells under the Advert Id column is filled. If not I want to get the Advert name of the relevant entry.
Currently I am able to check whether there is content in the table and if not a warning is displayed.
function saveAdminStatusAndTR(){
var rowCount = $('#mf-table tr').length;
if(rowCount == 1){ //case where there is no content in the table
toastr.error('No media file has been uploaded', 'Approval Status');
}else if(...){ //one of the cell under advert id is empty
// Need to show a warning message indicating the advert names
where there is no advert id
}else{
//my code here
}
}
Can any one help me with this?

Use jquery selector :eq
$("table td:eq(POSITION)").each(function(idx) {...});
This link will be helpfull https://api.jquery.com/eq-selector/
Hope this helps

Reload bootstrap table Refresh and change settings

I'm currently trying to change on a bootstrap table it's configurations dynamically, based on some user configurations stored in localStorage and reload it.
The table is filled at page load, but some events can fire inside the page and change it's configuration based on user settings.
I took a look at the official documentation, and some questions in SO. And I tried to do it, as below:
var $table = $('#grd-fatura');
$table.bootstrapTable('refresh', {
pageSize: 2
});
(The localstorage.getItem block and rules were removed from above code for testing purposes.)
And here is my table code (note that some elements are in portuguese):
<table
id="grd-fatura" data-click-to-select="true" data-response-handler="responseHandler"
data-pagination="true" #*data-height="460"*# data-show-footer="true" data-search="true"
data-show-columns="true" data-cache="false" data-show-toggle="true" data-show-export="true">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="ID" data-unique-id="ID" data-align="left" data-visible="false" data-sortable="true">Código</th>
<th data-field="estabelecimento" data-align="left" data-sortable="true">Estabelecimento</th>
<th data-field="historico" data-align="left" data-sortable="true">Histórico</th>
<th data-field="tipo" data-align="left" data-sortable="true">Tipo</th>
<th data-field="pessoa" data-align="left" data-sortable="true">Pessoa</th>
<th data-field="emissao" data-align="center" data-sortable="true">Emissão</th>
<th data-field="referencia" data-align="left" data-sortable="true">Referência</th>
<th data-field="situacao" data-align="left" data-sortable="true">Situação</th>
<th data-field="total" data-align="right" data-sortable="true" data-footer-formatter="Totalizador">Total</th>
</tr>
</thead>
</table>
The code does not work. The table does not refresh, and the code does not generate any errors. I took a look at some examples, and could not find where I am going wrong. So, how do I dynamically change the Boostrap table settings? What I am doing wrong in the above code?
Note: I am using Bootstrap 3.

Try this:
$table.bootstrapTable('refresh', {
query: {pageSize: 2}
});

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/

Copy a HTML table via JavaScript without the headers?

Using the JavaScript sample found in this stack overflow post you can have a button that automatically selects a table. This selected table can then be copied to the clipboard.
My users will be copying this data into an Excel template and do not need the header information (<th></th> or <thead></thead>).
My table looks something like this:
<table class="sortable">
<thead>
<tr><th>Person</th><th>Monthly pay</th></tr>
</thead>
<tbody>
<tr><td>Bob</td><td>£12,000</td></tr>
<tr><td>Doug</td><td>£8,500</td></tr>
<tr><td>Sam</td><td>£9,200</td></tr>
<tr><td>Nick</td><td>£15,300</td></tr>
</tbody>
<tfoot>
<tr><td>TOTAL</td><td>£45,000</td></tr>
</tfoot>
</table>
How would I go about unselecting the header information?
UDPATE1
The key is to select the tbody (assuming you Do not want tfoot).
<input type="image" src="table.png" name="image" onclick="selectElementContents( document.getElementById('theebody') );">

If the <table> has a <thead> and <tbody>, you could just select the <tbody>. However if you have header row(s) as sibling of other rows... here is a good start on how to set the range with more control.