jQuery-DataTables插件

下载DataTables插件
HTML部分：
    1.自定义搜索框
    物料名称:<input type="text" id="ma_name" >数量:<input type="text" id="min" >——<input type="text" id="max" >

    2.定义table，使用js生成DataTable
    <table id="example" class="display" cellspacing="0" width="100%">
        <thead>
        <tr>
            <th>物料名称</th>
            <th>数量</th>
            <th>日期</th>
            <th>物料是否齐全</th>
            <th>操做</th>
        </tr>
        </thead>
    </table>
js部分：
    var table=null;
    //自定义过滤功能，将在第某列中搜索两个值之间的数据
    $.fn.dataTable.ext.search.push(
        function( settings, data, dataIndex ) {
            var min = parseInt( $('#min').val(), 10 );//10进制数
            var max = parseInt( $('#max').val(), 10 );
            var ma_num = parseFloat( data[1] ) || 0; // use data for the ma_num column
    
            if ( ( isNaN( min ) && isNaN( max ) ) || ( isNaN( min ) && ma_num <= max ) || ( min <= ma_num && isNaN( max ) ) ||( min <= ma_num && ma_num <= max ) ){
                return true;
            }
            return false;
        }
    );
    
    //日期处理
    Date.prototype.Format = function (fmt) {
        var o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "h+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds() //毫秒
        };
       if (/(y+)/.test(fmt)) {
           fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
       }
       for (var k in o) {
           if (new RegExp("(" + k + ")").test(fmt)) {
               fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
           }
       }
       return fmt;
    }
    
    $(function () {
        //table模块
        table=$('#example').DataTable({
            "serverSide": true,//设置服务器端实现分页
            "searching": false,//关闭自动搜索功能
            "ajax": {
                "url":"${basePath}/wa/wm/listMateriel?t=" + Math.random(),
                "type": "POST",
                "data": function(d) {//传递服务器端数据
                       d.pageNum = d.start/d.length+1;
                       d.pageSize = d.length;
                       d.sortSql = d.columns[d.order[0]["column"]].data+" "+d.order[0]["dir"];//ma_senddate desc
                       d.ma_name=$("#ma_name").val();//获取自定义搜索框值
                    d.num_min=$("#num_min").val();
                    d.num_max=$("#num_max").val();
                }
            },
            "oLanguage": { // 国际化配置
                "sProcessing": "正在获取数据，请稍后...",
                "sLengthMenu": "显示 _MENU_ 条",
                "sZeroRecords": "没有找到数据",
                "sInfo": "从 _START_ 到  _END_ 条记录 总记录数为 _TOTAL_ 条",
                "sInfoEmpty": "记录数为0",
                "sInfoFiltered": "(所有记录数 _MAX_ 条)",
                "sInfoPostFix": "",
                "sSearch": "配件名称搜索",
                "sUrl": "",
                "oPaginate": {
                    "sFirst": "第一页",
                    "sPrevious": "上一页",
                    "sNext": "下一页",
                    "sLast": "最后一页"
                }
            },
            "columns": [{
                "data": "ma_name"
            },{
                "data": "ma_num"
            },{
                "data": "ma_date",
                render: function(data) {
                    if(''!=data && null !=data){
                        return (new Date(data)).Format("yyyy-MM-dd");
                    }else{//数据没有时手动设置空，不然显示‘1970-01-01’
                        return '';
                    }
                 }
            },{
                "data": "ppFull",//接收值显示多选框
                render : function(data){
                    if(1==data){
                        return ("<input type='checkbox' checked disabled>");
                    }else{
                        return ("<input type='checkbox' disabled>");
                    }
                }
            },{
                "data": function(obj){//接收json中status和id值
                    if(4 == obj.status){
                        return "<a href='#' onclick='aaa(\""+obj.id+"\");'>发货</a>";
                    }else{
                        return "<a href='#' onclick='bbb(\""+obj.id+"\");'>收货</a>";
                    }
                }
            }],

　　　　 //默认按照第3列倒序排序
            "aaSorting": [
                [2, "desc" ]  
            ],
            columnDefs: [{
                "sortable":false,"targets":[4]//第5列不参加排序
            }]
        });
        //自定义搜索框监听器，刷新页面数据
        $('#ma_name,#min,#max').keyup(function() {
            table.ajax.reload( null, true );
        });
    });

 

 

function render( data, type, row, meta ){}

data:当前cell的值（基于 columns.dataOption ）

type:数据类型（filter、display、type、sort）

row:当前一整条数据，能够取得本条数据任何参数

meta:objectType

注：从 1.10.1版开始: 一个对象包含了单元格的附加信息. 对象包含以下属性:

• row - 被请求的单元格行的索引.参考 row().index()API
• col - 被请求的单元格列的索引. column().index()API
• settings - Datatables.SettingsType API实例

若是使用render动态建立标签元素，此标签的监听事件应使用live();例如：$('.regName').live('dblclick',function(){});