使用Tablesorter的列中的数字范围
我最近遇到了一个问题。 我打算使用带滑块filter的这种类型tablesorter并尝试修改它,但它没有用。 我需要能够处理表格列中的数字范围(即不仅仅是单个数字,如51,而是3-8)。 因此,当我在滑块filter上选择值5时,我需要它来显示列值为3-8的行而不是值为51的列。
对于如何在表格中使用数值范围,您有任何关于如何修改它的想法吗?
你需要使用filter_formatter
和filter_functions
的组合,就像这样( demo ):
HTML
AlphaNumeric Range Animals Sites abc 123 1-10 Koala http://www.google.com abc 1 38-55 Ox http://www.yahoo.com abc 9 4-10 Girafee http://www.facebook.com zyx 24 11-22 Bison http://www.whitehouse.gov/ abc 11 13-43 Chimp http://www.ucla.edu/ abc 2 28-60 Elephant http://www.wikipedia.org/ abc 9 9-25 Lion http://www.nytimes.com/ ABC 10 9-23 Zebra http://www.google.com zyx 1 19-29 Koala http://www.mit.edu/ zyx 12 0-6 Llama http://www.nasa.gov/
脚本
$(function () { $('table').tablesorter({ theme: 'blue', widgets: ['zebra', 'filter'], widgetOptions: { filter_functions: { 1: function (e, n, f, i) { var parts = e.split('-'), val = parseFloat(f), min = parseFloat(parts[0]), max = parseFloat(parts[1] || 999); // default max = 999 return val >= min && val <= max; } }, filter_formatter: { 1: function ($cell, indx) { return $.tablesorter.filterFormatter.uiSlider($cell, indx, { values: 0, min: 0, max: 60, delayed: false, exactMatch: false, valueToHeader: false }); } } } }); });