在本文中，将探讨如何使用基本的HTML和JavaScript来集成网格样式视图。通过使用特定的插件，可以轻松地实现排序和过滤功能，并且只需几行代码即可实现。
最好的一点是，使用这个插件，可以非常容易地实现排序和过滤功能。可以使用文本框进行过滤，甚至可以使用选择框。还可以像上面的图像所示那样对范围进行过滤。有一个特殊要求，需要在范围类型的列中使用选择框。因此，需要更改插件。已经更新了插件，以便在范围类型的字段中可以使用选择框。
为了实现这个功能，进行了以下步骤：
首先，需要在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 = $(
''
);
} else {
from =
'';
}
th.append(from);
th.append(_fnRangeLabelPart(1));
var sToId = oTable.attr("id") + '_range_to_' + i;
if (oSelect == "") {
to = $(
''
);
} else {
to =
'';
}
/*
Code update ends here */
在方法中包含了添加选择框的代码。在“From”选择框中，默认选项将是传递的数组中的第一个值，而“To”将有最后一个。
然后，更新了主方法中的case语句，更改如下：
case "number-range":
fnCreateRangeInput(oTable, "", "");
break;
case "number-range-select":
fnCreateRangeInput(oTable, "select", aoColumn.values);
break;
一旦完成，使用新的范围过滤器类型将非常容易，这是如何编写JavaScript以调用此方法的方式：
$('#example').dataTable({
"bFilter": true,
"bDisplayLength": false
}).columnFilter({
sPlaceHolder: "head:after",
aoColumns: [{ type: "select" }, { type: "select" },
{ type: "number-range-select", values: ["10", "50", "100"]}]});