如何使用jQuery DataTables插件过滤页面加载数据？

Question

我在我的应用程序中使用jQuery DataTables插件，并且显示了一组多年的数据。当页面加载时，我希望数据开始过滤到当前年份。页面加载时是否可以使用插件过滤数据？

Answer 1

正如Datatables API所说：

$(document).ready(function() {
    oTable = $('#example').dataTable();

    /* Filter immediately */
    oTable.fnFilter( 'test string' );
} );

如果您只需要过滤特定列，请使用（从零开始）columnIndex作为第二个参数：

    oTable.fnFilter( 'test string', columnIndex );

Answer 2

你可以尝试

JQuery DataTables列过滤插件

列过滤功能是您需要使用DataTables站点上的自定义示例实现的功能之一。作为替代方案，您可以使用DataTables列过滤器插件，其中封装了来自DataTables站点的大多数代码exmaples。

要实现和自定义列过滤，您需要使用DataTables插件和列过滤插件，并使用基本！dataTable插件增强HTML表格，然后使用columnFilter插件，如示例所示：

 $("#dataTableId").dataTable().columnFilter();

参见文字 - 默认行为。您可以定义是否在过滤中使用正则表达式或智能过滤

此处http://code.google.com/p/jquery-datatables-column-filter/wiki/ColumnFilter

请参阅更多详情http://code.google.com/p/jquery-datatables-column-filter/

实时示例http://jquery-datatables-column-filter.googlecode.com/svn/trunk/default.html

修改

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>    
<script type="text/javascript" src="Scripts/scripts-pack.js"></script>  

This plugin will then create the filters in a row in the THEAD element of the table so add this if it is not already there.


<table id='demotable'>        
    <thead>
        <tr><th>Col1</th><th>Col2</th><th>Col3</th></tr>        
    </thead>
    <tbody>
        <tr><td>Value 1</th><th>Value 2</th><th>Value 3</th></tr>        
        ....
    </tbody>
</table>

Hook in your table when the document is loaded.


$(document).ready(function() {
    $('#demotable).tableFilter();
});

参考http://www.picnet.com.au/blogs/Guido/post/2009/06/29/JQuery-Table-Filter-Plugin.aspx