Tablesorter: don't show specific column values as filters - tablesorter

Is there a way to remove a column value as a filter on a column that has a "filter-select" attribute.
Here's an example from #mottie in jsfiddle
http://jsfiddle.net/Mottie/856bzzeL/1085/. I just added a "filter-select" on column Animal column. is there a way for example to remove Koala from the drop down filter values?
HTML
<table class="tablesorter">
<thead>
<tr>
<th>AlphaNumeric</th>
<th>Numeric</th>
<th class="filter-match filter-select">Animals</th>
<th>Sites</th>
</tr>
</thead>
<tbody>
<tr>
<td>abc 123</td>
<td>10</td>
<td>Koala</td>
<td>http://www.google.com</td>
</tr>
<tr>
<td>abc 1</td>
<td>234</td>
<td>Ox</td>
<td>http://www.yahoo.com</td>
</tr>
<tr>
<td>abc 9</td>
<td>10</td>
<td>Girafee</td>
<td>http://www.facebook.com</td>
</tr>
<tr>
<td>zyx 24</td>
<td>767</td>
<td>Bison</td>
<td>http://www.whitehouse.gov/</td>
</tr>
<tr>
<td>abc 11</td>
<td>3</td>
<td>Chimp</td>
<td>http://www.ucla.edu/</td>
</tr>
</tbody>
Script: Tablesorter
/* Documentation for this tablesorter FORK can be found at
* http://mottie.github.io/tablesorter/docs/
*/
// See http://stackoverflow.com/q/40899404/145346
$(function(){
$('table').tablesorter({
theme: 'blue',
widgets: ['zebra', 'filter'],
widgetOptions: {
filter_defaultFilter: {
// Ox will always show
2: '{q}|Ox'
}
}
});
});

In this case, you will need the filter_selectSource option to manipulate the options of the select (demo)
$(function() {
$('table').tablesorter({
theme: 'blue',
widgets: ['zebra', 'filter'],
widgetOptions: {
filter_defaultFilter: {
// Ox will always show
2: '{q}|Ox'
},
filter_selectSource: function(table, column, onlyAvail) {
// get an array of all table cell contents for a table column
var array = $.tablesorter.filter.getOptions(table, column, onlyAvail);
// remove Koala (multiple entries) from array
return $.grep(array, function(animal) {
return animal !== "Koala";
});
}
}
});
});

Related

Tablesorter - How to ignore sort for certain cell value?

How can I prevent Tablesorter from sorting a certain value or keep these values at the bottom? More specifically, this certain value will always be a -
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>Name</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Bach</td>
<td>40</td>
</tr>
<tr>
<td>Doe</td>
<td>-</td>
</tr>
</tbody>
</table>
I want to keep Doe with the value "-" always at the bottom.
Tablesorter has an emptyTo option which can modify the sort behavior of empty, or non-numeric, cells (demo)
In this case, you might need to set a data-text attribute (modified by the textAttribute option to an empty string.
HTML
<td data-text="">-</td>
JS
$('#myTable').tablesorter({
// ...
emptyTo: 'bottom'
});
This worked for me.
Doc: https://mottie.github.io/tablesorter/docs/example-options-headers-digits-strings.html
jQuery(function($) {
$("#myTable").tablesorter({
stringTo: 'bottom'
});
});

jQuery datatable pagination not working with mvc view

I'm working on an MVC application. The table data is returned as a view from the controller. After binding the rows in the razor view, I'm initializing the datatable. The no. of rows returned is 50.
The issue is, the datatable displays all the 50 records and hence there is no pagination. I would like it to show only 10 records per page and then paginate.
Also, I do not want to get the data page by page. The total count, which is 50 in this case, is decided by the end user. That's the main reason, I choose datatables as it provides sorting, search & pagination with no coding.
So, does the pagination feature work if the data is bound to DOM and then initialized. If not, what is the best way to do it.
Here is the code:
#model ResultOutput
<table class="tblKeyMetrics" role="grid">
<thead>
<tr role="row">
<th class="">Value</th>
<th class="">Impressions</th>
</tr>
</thead>
#if (Model.KeyMetrics != null && Model.KeyMetrics.Count > 0)
{
<tbody>
for (int index = 0; index < Model.KeyMetrics.Count; index++)
{
KeyMetrics metric = Model.KeyMetrics[index];
<tr role="row">
<td>#metric.value</td>
<td>#metric.impressions</td>
</tr>
}
</tbody>
}
else
{
<tbody>
<tr class="row">
<td colspan="3">
No results found.
</td>
</tr>
</tbody>
}
</table>
<script>
$(document).ready(function () {
InitializeDataTable($(".tblKeyMetrics"));
});
function InitializeDataTable(tbl) {
if (!$.fn.DataTable.isDataTable($(tbl))) {
$(tbl).DataTable({
pageLength: 10,
iDisplayLength: 10,
"paging": true
});
}
}
</script>
using jquery.dataTables.min.js v1.10.16 with dataTables.bootstrap.min v3

How do I pass an ID from View to the ViewModel as a parameter for GET function?

I'm creating a project using MVC, knockoutJS, Web API, Bootstrap and so forth, the database in use is MSSQL Server 2012. It's all working very well, the controllers have properly created CRUD operations. The data from DB is show in a grid table in the UI, and every row is clickable, and opens up a modal in which the data about that exact element is shown. The problem I'm experiencing is the inability to pass a certain value of the row, in this case an ID, to ViewModel as a parameter for getting a single result in modal. I can do it manually, and put some value in the ViewModel, and the data will show, but I'm unable to send the value from the View.
Here's the code for ViewModel:
var regionsModel = {
regionId: ko.observable(),
companyId: ko.observable(),
name: ko.observable(),
companyName: ko.observable()
};
var regionsListModel = {
regions: ko.observable()
};
function getRegions() {
get(apiUrl + "Regions/GetRegions", {}, function (data) {
regionsListModel.regions(data);
});
}
function getRegion() {
get(apiUrl + "Regions/GetRegion", { aiId: regionsModel.regionId() }, function (data) {
regionsModel.regionId(data.RegionID);
regionsModel.companyName(data.CompanyName);
regionsModel.companyId(data.CompanyID);
regionsModel.name(data.Name);
});
}
function viewRegion() {
$("#ViewRegionModal").modal('show');
//regionsModel.regionId($('#ViewRegion').val());
getRegion();
return false;
}
Here's the code for the View:
<table class="table table-striped table-bordered responsive" id="dtable">
<thead>
<tr>
<th style="width: 20px;">ID</th>
<th>Region Name</th>
<th>Company Name</th>
</tr>
</thead>
<tbody data-bind="foreach: regionsListModel.regions">
<tr id="ViewRegion" data-toggle="modal" data-bind="click: viewRegion, value: RegionID">
<td data-bind="text: RegionID"></td>
<td data-bind="text: Name"></td>
<td data-bind="text: CompanyName"></td>
</tr>
</tbody>
</table>
aiId parameter is for the GetRegion method in Controller.
This is the code for the View in which shows the data for a certain element:
<table class="table table-striped" data-bind="with: regionsModel">
<tbody>
<tr>
<th>Region ID:</th>
<td><span data-bind="text: regionsModel.regionId"></span></td>
</tr>
<tr>
<th>Region Name:</th>
<td><span data-bind="text: regionsModel.name"></span></td>
</tr>
<tr>
<th>Company Name:</th>
<td><span data-bind="text: regionsModel.companyName"></span></td>
</tr>
</tbody>
</table>
Any help would be appreciated!
Knockout adds the current bound object as first argument when it calls the event handler.
The second argument is the event object.
So the only thing you need to do is add a parameter to the viewRegion function.
function viewRegion(region) {
var regionID = region.RegionID;
// get data
return false;
}
I hope it helps.

How do exchange sorting with tablesorter

I want to sort the list of exchange. it looks the values ​​of foreign currencies. but, the country with the sort of value for money. transformed values ​​and the sort, to show the actual values​​.
I could not sort by a value converted. was the sort of values ​​that appear. How to sort with the values ​​calculated. But the secret values ​​calculated?
<script id="js">
var dolar = 1.7849;
var euro=2.3643;
var yen=1;
$(function() {
$("table").tablesorter({
theme: 'blue'
,headers: {
0: {
sorter: false
},
1: {
sorter: 'custom_sort_function'
},
2: {
sorter: false
}
}
});
});
</script>
<table class="tablesorter">
<thead>
<tr>
<th>ID</th>
<th>Money</th>
<th>Symbol</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td><!-- exchenge value dolar * cellvalue -->
<td>USD</td>
</tr>
<tr>
<td>2</td>
<td>1</td><!-- exchenge value euro * cellvalue -->
<td>EUR</td>
</tr>
<tr>
<td>3</td>
<td>1YEN</td><!-- exchenge value yen * cellvalue -->
<td></td>
<td>TL</td>
</tr>
</tbody>
</table>
Sample View:
Sort Money Field ASC
ID Money Symbol
-- ------- ----------
1 1YEN YEN
2 1USD USD
3 1EURO EUR
Sort Money Field Desc
ID Money Symbol
-- ------- ----------
3 1EURO EUR
2 1USD USD
1 1YEN YEN
I'm not exactly sure what you want, but I put together this demo which will sort the Money column on the calculated exchange rate, but you can't tell what's going on, so I included a line in the parser to add the calculated value to the table cell.
I modified the HTML slightly:
<tbody>
<tr>
<td>1</td>
<td data-value="usd">1</td><!-- exchenge value dolar * cellvalue -->
<td>USD</td>
</tr>
<tr>
<td>2</td>
<td data-value="eur">1</td><!-- exchenge value euro * cellvalue -->
<td>EUR</td>
</tr>
<tr>
<td>3</td>
<td data-value="yen">1</td><!-- exchenge value yen * cellvalue -->
<td>YEN</td>
</tr>
</tbody>
then used this code:
// add the exchange rate out here
var exchange = {
usd : 1.7849,
eur : 2.3643,
yen : 1
};
// add parser through the tablesorter addParser method
$.tablesorter.addParser({
// set a unique id
id: 'exchange',
is: function(s) {
// return false so this parser is not auto detected
return false;
},
format: function(s, table, cell, cellIndex) {
// format your data for normalization
var $c = $(cell),
cur = $c.attr('data-value'),
val = $.tablesorter.formatFloat(s, table) * (cur ? exchange[cur] : 1);
$c.append(' (' + val.toFixed(2) + ')');
return val;
},
// set type, either numeric or text
type: 'numeric'
});
$('table').tablesorter({
theme : 'blue',
headers: {
1: { sorter: "exchange" }
}
});
If you don't want to add the calculated value to the cell, then just remove this line:
$c.append(' (' + val.toFixed(2) + ')');
Hopefully, I understood what you wanted.

jQuery loop through td and insert jQueryUI progress bar

I am trying to use the jQuery's progressbar method on the value in my table. I've been able to traverse the table and add the proper div's for the required progressbar's selector. The progress bar does not display the val variable correctly.
var i = 0;
var val = 0;
var id = "";
$("document").ready(function() {
$('#progress tr').find('td').each(function() {
//$(this).append("<div></div>");
if ($(this).html() >= 0)
{
//alert($(this).html());
val = $(this).html();
id = "p_"+i;
$(this).html('<div id="'+id+'"></div>');
$('#'+id).progressbar({
"value": val
});
i++;
//$('#'+id).attr('aria-valuenow',val);
alert(val);
}
});
});
$(function() {
$("#progressbar").progressbar( "option", "value", 37 );
});
<table cellspacing="0" cellpadding="0" border="0" id="progress">
<caption>Class Performance</caption>
<tbody>
<tr>
<th>Student Name</th>
<th>Grade 1</th>
<th>Grade 2</th>
<th>Grade 3</th>
<th>Grade 4</th>
<th>Grade 5</th>
<th>Grade 6</th>
</tr>
<tr>
<td>Wayne, Bruce</td>
<td>100</td>
<td>100</td>
<td>67</td>
<td>14</td>
<td>6</td>
<td>0</td>
</tr>
<tr>
<td>Dent, Harvey</td>
<td>100</td>
<td>100</td>
<td>33</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
</tbody>
</table>
val = $(this).html();
will retrieve all the 'html'.. i.e along with the tags of the elements within the TD....
If you want to get the integer value alone, try saving it in a hidden field inside the td and accessing it when you want to get the value....

Resources