（jQuery Datatable）jQuery Datatable

参考资源

http://blog.csdn.net/builderwfy/article/details/50401302
http://ask.csdn.net/questions/257315
http://blog.csdn.net/panbo434557245/article/details/39050071

// *************************************//
            var usrTable = $('#user-table').DataTable({
//               "aaSorting": [[1,'asc']],
                 "dom": "<'toolbar'><'row'<'col-xs-6'><'col-xs-6'>r>t<'row'<'col-sm-6'i><'col-sm-6'p>>",
                 "bProcessing": true,
                 "bAutoWidth":false,
                 "bServerSide": true,
                 'bPaginate': true,
                 "bDestroy":true,
                 "bStateSave": true,
                 "bSort":true,
                 "iDisplayLength":10, 单页显示多少
                 "sServerMethod": "POST",
                 "bRetrieve": true,
                 "sAjaxSource" : ctx + "/productMon/data.json",
                 'sAjaxDataProp': 'data',
                  'fnServerParams': function ( aoData ) {
                     aoData.push(
                          { "name":"appName", "value":""},
                          { "name":"channel", "value":channel},
                          {"name":"date1", "value":"12"},
                          { "name":"date2", "value":"now"},
                          { "name":"idisplaystart", "value":0},
                          { "name":"iDisplayLength", "value":10},
                          {"name":"sort", "value":"tmIntrvlCd"},
                          {"name":"tableType","value":"user"},
                          {"name":"sSortDir_0","value":"asc"} 默认排序
                     );
                 },
                 "fnDrawCallback": function (oSettings) {
                     var json=jQuery.parseJSON(oSettings.jqXHR.responseText);//获取后台方式 直接可以拿到json 之后进行处理

                    //添加序号列   
                     var api = this.api();
                     var startIndex= api.context[0]._iDisplayStart;//获取到本页开始的条数
                     api.column(0).nodes().each(function(cell, i) {
                          cell.innerHTML = startIndex + i + 1;
                     });
                 },
                 "aoColumns": [
                 { "bSortable": false, "mDataProp":"id" },
                 { "bSortable": true, "mDataProp":"tmIntrvlCd" },
                 { "bSortable": false, "mDataProp":"appName",
                      "mRender":function(data, type, obj){
                            if(data == null) { 对返回的data做判断
                                     return "";
                            }else{
                                 return data;
                            } 
                }
                 },
                 { "bSortable": false, "mDataProp":"newUsrCnt",
                      "mRender":function(data, type, obj){
                            if(data == null) {
                                     return "";
                            }else{
                                 return data;
                            }
                }
                 },
                 { "bSortable": false, "mDataProp":"newUsrCntHb" ,
                      "mRender":function(data, type, obj){
                           if(data == "--" || data == null) {
                                return "--";
                            } else {
                                 if(data > 10){
                                 return '<span class="red">'+data+'%'+'</span>';
                           }
                                 else if(data<-10){
                                      return '<span class="green">'+data+'%'+'</span>';
                                 }
                                 else{
                                      return data+'%';
                                 }
                            }

                }
           },
                 { "bSortable": false, "mDataProp":"actUsrCnt",
                      "mRender":function(data, type, obj){
                            if(data == null) {
                                     return "";
                            }else{
                                 return data;
                            }
                }
                 },
                 { "bSortable": false, "mDataProp":"actUsrCntHb" ,
                      "mRender":function(data, type, obj){
                           if(data == "--" || data == null) {
                                return "--";
                            } else {
                                 if(data > 10){
                                 return '<span class="red">'+data+'%'+'</span>';
                           }
                                 else if(data<-10){
                                      return '<span class="green">'+data+'%'+'</span>';
                                 }
                                 else{
                                      return data+'%';
                                 }
                            }

                }
            },
                 ]

                 } );
注意：

    * var json=jQuery.parseJSON(oSettings.jqXHR.responseText);//获取后台方式 直接可以拿到json 之后进行处理，返回必须是json格式
    * {"bSortable": true, "mDataProp":"id",}必须要对应实体类
    * 可以放$(function(){})中。随页面一起加载



第二次重新加载，异步加载！刷新数据！

     alert("需要先清除表");
     m_cnt = monCnt;

     if (monCnt == -1) {
           var date1 = $("#dateInput1").val();
           var date2 = $("#dateInput2").val();
     } else {
           var date1 = monCnt;
           var date2 = "now";// 代表现在时间
     }
     var appName = $("#appsChos option:selected").val();
     if(typeof(appName) == "undefined") {
      appName = "";
   }
   var source = "/productMon/data.json?channel=" + channel + "&appName=" + appName + "&date1=" + date1 + "&date2=" + date2;
   $('#user-table').dataTable().fnSettings().sAjaxSource = source;
   $('#user-table').dataTable()._fnReDraw();
   $('#requestData-table').dataTable().fnSettings().sAjaxSource = source;
   $('#requestData-table').dataTable()._fnReDraw();

添加序号      
var api = this.api();
   var startIndex= api.context[0]._iDisplayStart;//获取到本页开始的条数
   api.column(0).nodes().each(function(cell, i) {
     cell.innerHTML = startIndex + i + 1;
   });