扩展 DataTables 范围过滤器

• 下载代码 - 126.14 KB

引言

DataTables 插件提供了一种非常高效且简便的方法，可以使用基本的 HTML 和 JavaScript 在客户端集成网格视图。 使用此插件，您可以用很少的代码行生成类似以下的输出

背景

最好的地方在于，您可以使用此插件轻松获得排序和过滤功能。 我们可以使用文本框或选择框进行过滤。 甚至可以像上面的图片显示的那样按范围进行过滤。 我有一个特殊的需求，需要我在范围类型的列中使用选择框。 因此，我需要修改该插件。 我已经更新了该插件，以便也可以在范围类型的字段中使用选择框。

Using the Code

为了实现此功能，我做了以下操作

步骤 1

我需要在 jquery.dataTables.columnFilter.js 中做的第一个更改是更新 fnCreateRangeInput 方法。 我包含了两个参数，用于说明范围过滤器的类型（文本框或选择下拉菜单）& 第二个参数用于在它是选择框的情况下提供值。 以下是 fnCreateRangeInput 方法中的代码更新

/* 	Customized code which can filter data with the select columns between two values
*	Updated By: 	Muhammad Waseem Arfi
*/

if(oSelect == "")
{
	from = $('<input type="text" rel="' + i + '" id="' + 
	  sFromId + '" class="number_range_filter" />');
}
else
{
	from = '<select rel="' + i + '" id="' + sFromId + 
	  '" class="number_range_filter"><option value="'+
	  aData[0]+'">ALL</option>';

	var j = 0;
	var iLen = aData.length;
	for (j = 0; j < iLen; j++) 
	{
		if (typeof (aData[j]) != 'object') 
		{
			from += '<option value="' + escape(aData[j]) + 
			        '">' + aData[j] + '</option>';
		}
		else 
		{
			from += '<option value="' + escape(aData[j].value) + 
			        '">' + aData[j].label + '</option>';
		}
	}
	from += '</select>';
}

th.append(from);
th.append(_fnRangeLabelPart(1));
var sToId = oTable.attr("id") + '_range_to_' + i;
if(oSelect == "")
{
	to = $('<input type="text" rel="' + i + '" id="' + 
	       sToId + '" class="number_range_filter" />');
}
else
{
	to = '<select rel="' + i + '" id="' + sToId + 
	     '" class="number_range_filter"><option value="'+ 
	     aData[aData.length-1] +'">ALL</option>';
	var j = 0;
	var iLen = aData.length;
	for (j = 0; j < iLen; j++) 
	{
		if (typeof (aData[j]) != 'object') 
		{
			to += '<option value="' + escape(aData[j]) + 
			      '">' + aData[j] + '</option>';
		}
		else 
		{
			to += '<option value="' + escape(aData[j].value) + 
			      '">' + aData[j].label + '</option>';
		}
	}
	to += '</select>';
}
	
/* Code update ends here */

我已在方法中包含了添加选择框的代码。 在“From”选择框中，默认选项将是传递的数组中的第一个值，而“To”将包含最后一个值。

第二步

然后，我更新了 main 方法中的 case 语句，更改如下所示

case "number-range":
    fnCreateRangeInput(oTable,"","");
    break;
case "number-range-select":
    fnCreateRangeInput(oTable, "select",aoColumn.values);
    break;

步骤 3

完成此操作后，将很容易使用新的范围过滤器类型，以下是编写 JavaScript 以调用此方法的方式

$('#example').dataTable({"bFilter": true, 
  "bDisplayLength":false  }).columnFilter({ sPlaceHolder: "head:after", 
  aoColumns: [{ type: "select" }, {type: "select" },
  { type: "number-range-select",values: [ "10", "50", "100"]}]});

第三行显示了名为“number-range-select”的新字段类型的使用。 一旦我们编写了这段代码，范围列过滤器将如下所示

历史

• 2011年10月28日：初始发布