datatables插件的应用

datatables是一个jq的table插件，可以很方便的操作表格元素

1、引用dataTables插件

（1）引入css样式

  <link rel="stylesheet" type="text/css" href="/css/jquery.dataTables.css">

（2）引入jquery

<script type="text/javascript" src="/js/jquery-1.10.2.min.js"></script>

（3）引入jquer.dataTables.js

<script type="text/javascript" src="/js/jquery.dataTables.js"></script>

2、准备table模板

<table class="table table-striped table-bordered table-hover" id="student">
        <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        </thead>
    </table>

3、初始化模板（获取数据信息，以服务器模式）

var initGrid = function () {
        configMap.studentGrid = $('#student').DataTable({
            "dom": 'rt<"row"<"col-md-6"<"pull-left"i><"pull-left"l>><"col-md-6"p>><"clear">',
            "order": [[0, 'asc']],
            columnDefs: [{
                orderable: false,//禁用排序
                targets: [1, 2, 3, 4],   //指定的列
            }],
            "ordering": false, //屏蔽排序
            "searching": false,//屏蔽datatales的查询框
            "paging":true,
            "autoWidth": false,
            // "bInfo" : false,
            "lengthMenu": [5,10],
            // "pagingType":   "full_numbers",
            // "processing": true,
            "serverSide" : true,//是否开启服务器模式，true 分页，过滤，排序处理都放在服务器端进行
            ajax:{
                'url':'',//请求的url地址
                'type':'GET',
                'dataSrc':function (data) {  //定义从服务区返回什么样的数据
                    console.info(data);
                    if(data.success){
                        return data;
                    }else{
                        return "";
                    }
                },
                'data':function (data) {//设置请求的参数
                    data.state=true;//参数以data.加参数名的形式设置 如传惨数查询条件 data.search='hh'
                    data.dataTime='';
                }
            },
            "columns": [//设置列对应的参数
                {"data": "product.name"},
                {
                    "data": "name"
                   
                 }
                },
                {
                    "data": "age"
                 
                },
                {
                    "data": "sex"
               
                }
            ],
            "language": {
                url: ‘datatables/chinese.json’ //语言包
            },
            "drawCallback": function () { // 数据加载完成后执行
             
            }
        });
    };