使用Tablesorter的列中的数字范围

我最近遇到了一个问题。 我打算使用带滑块filter的这种类型tablesorter并尝试修改它,但它没有用。 我需要能够处理表格列中的数字范围(即不仅仅是单个数字,如51,而是3-8)。 因此,当我在滑块filter上选择值5时,我需要它来显示列值为3-8的行而不是值为51的列。

对于如何在表格中使用数值范围,您有任何关于如何修改它的想法吗?

你需要使用filter_formatterfilter_functions的组合,就像这样( demo ):

HTML

 
AlphaNumeric Range Animals Sites
abc 1231-10Koalahttp://www.google.com
abc 138-55Oxhttp://www.yahoo.com
abc 94-10Girafeehttp://www.facebook.com
zyx 2411-22Bisonhttp://www.whitehouse.gov/
abc 1113-43Chimphttp://www.ucla.edu/
abc 228-60Elephanthttp://www.wikipedia.org/
abc 99-25Lionhttp://www.nytimes.com/
ABC 109-23Zebrahttp://www.google.com
zyx 119-29Koalahttp://www.mit.edu/
zyx 120-6Llamahttp://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 }); } } } }); });