再添加一个功能,对各个列进行过滤。
添加js代码:
function fnCreateSelect( aData )
{
var r='<select><option value=""></option>', i, iLen=aData.length;
for ( i=0 ; i<iLen ; i++ )
{
r += '<option value="'+aData[i]+'">'+aData[i]+'</option>';
}
return r+'</select>';
}
(function($) {
/*
* Function: fnGetColumnData
* Purpose: Return an array of table values from a particular column.
* Returns: array string: 1d data array
* Inputs: object:oSettings - dataTable settings object. This is always the last argument past to the function
* int:iColumn - the id of the column to extract the data from
* bool:bUnique - optional - if set to false duplicated values are not filtered out
* bool:bFiltered - optional - if set to false all the table data is used (not only the filtered)
* bool:bIgnoreEmpty - optional - if set to false empty values are not filtered from the result array
* Author: Benedikt Forchhammer <b.forchhammer /AT\ mind2.de>
*/
$.fn.dataTableExt.oApi.fnGetColumnData = function ( oSettings, iColumn, bUnique, bFiltered, bIgnoreEmpty ) {
// check that we have a column id
if ( typeof iColumn == "undefined" ) return new Array();
// by default we only wany unique data
if ( typeof bUnique == "undefined" ) bUnique = true;
// by default we do want to only look at filtered data
if ( typeof bFiltered == "undefined" ) bFiltered = true;
// by default we do not wany to include empty values
if ( typeof bIgnoreEmpty == "undefined" ) bIgnoreEmpty = true;
// list of rows which we're going to loop through
var aiRows;
// use only filtered rows
if (bFiltered == true) aiRows = oSettings.aiDisplay;
// use all rows
else aiRows = oSettings.aiDisplayMaster; // all row numbers
// set up data array
var asResultData = new Array();
for (var i=0,c=aiRows.length; i<c; i++) {
iRow = aiRows[i];
var aData = this.fnGetData(iRow);
var sValue = aData[iColumn];
// ignore empty values?
if (bIgnoreEmpty == true && sValue.length == 0) continue;
// ignore unique values?
else if (bUnique == true && jQuery.inArray(sValue, asResultData) > -1) continue;
// else push the value onto the result data array
else asResultData.push(sValue);
}
return asResultData;
}}(jQuery));
在前面博客中的原来的 sortData()方法中添加js:
$("tfoot th").each( function ( i ) {
this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
$('select', this).change( function () {
oTable.fnFilter( $(this).val(), i );
} );
} );
在页面table中添加一个:
<tfoot>
<tr>
<th width ='10%' align='center' class='w_01' ></th>
<th width ='10%' align='center' class='w_01' ></th>
<th width ='10%' align='center' class='w_01' ></th>
<th width ='10%' align='center' class='w_01' ></th>
<th width ='10%' align='center' class='w_01' ></th>
<th width ='10%' align='center' class='w_01' ></th>
<th width ='10%' align='center' class='w_01' ></th>
<th width ='10%' align='center' class='w_01' ></th>
</tr>
</tfoot>
最后别忘了,引入datatable的js:
jquery.dataTables.js,
jquery.dataTables.css//是他自带css,要是想改式样的,就直接修改里面的css。省省不少使呢。。。。
还有,最好的学习方法是直接看官方文档,不过英文的,很难消化。
以上,完毕。
分享到:
相关推荐
VB.NET的DataTable常用方法总结
详细介绍了asp.net中datatable的用法,总结了datatable所用内容
datatable使用实例,datatable使用实例,datatable使用实例,datatable使用实例
datatable用法 demo,介绍了datable添加列 添加行
总结DataTable,DataSet的使用方法,对Datagirdview的数据加载。
DataTable.Compute方法使用实例 DataTable.Compute强大的功能 C#中表达式的计算 详细说明:http://www.our-code.com/news/2010718/n458047.html
一、DataTable简介 (1)构造函数 DataTable() 不带参数初始化DataTable 类的新实例。 DataTable(string tableName) 用指定的表名初始化DataTable 类的新实例。 DataTable(string tableName, string tableNamespace) ...
上一篇随笔提到了MvcPager,最近用到了一款前端JQ插件——DataTable(简称DT),很好用。 DT是一款前端插件,和后端完全分离开,就这点来看,我就特别喜欢。 一.使用DT,需要以下支持 js:jq+jquery.dataTables.min....
DataSet和DataTable有用的方法
DataTable,DataView和DataGrid用法教程:DataTable,DataView和DataGrid中一些容易混淆的概念,详细讲解了它的区别和用法。
到附属点附属点到附属点发送到附属点发送到撒旦发啊
主要为大家详细介绍了C# DataTable的使用方法,感兴趣的小伙伴们可以参考一下
用C#实现对DataTable的JOIN,GROUP BY,FILTER,UNIONALL,DISTINCT
c#datatable的使用,一些方法,叫你详细的熟悉了解DataTable
DataTable的常见使用,datetable的自定义方法,select的四种重载,项目中常用的筛选及排序。新datatable的赋值
DataTable 用法1、ADO.NET相关对象一句话介绍 2、如何更新数据到Database
C# DataTable 的常见用法: (1)新建数据表。 DataTable dt=new DataTable();如果带个String参数,此参数表示表名。 (2)向表添加列。 //数据库的Nvarchar等类型,在此可用String兼容。可不指明数据类型 ...
datatable转换成JSON格式的方法 如果想将XML转成JSON方法也是一样的,先把XML读到datatable当中,然后再使用这个方法就行了