Datatables表格的使用

表格数据的显示

        $('#userlist').DataTable({
          'paging' : true,
            "aLengthMenu":[
                [10, 20, 50, 100],['10条/页', '25条/页', '50条/页', '100条/页']
            ],
          "iDisplayLength": 10,
          'lengthChange': true,
          'dom'    : 't<"bottom"lifp<"clear">>',
          'searching'   : false,
          'ordering'  : true,
          'info'   : true,
          'autoWidth'   : false,
          "serverSide"    : true,
          "destroy":true,
          "ajax": {
              "url":"../../user/listUser",
              "data": function (d) {
                  for(var key in d){
                       if(key.indexOf("columns")==0||key.indexOf("order")==0||key.indexOf("search")==0){ //以columns开头的参数删除
                           delete d[key];
                       }
                   }
                  //指定检索参数名称，后台参数名为extraSerach
                  eval('d.'+field+'="'+value+'"');
              }
          },
          "columns": [
              { "data": "id" ,"render": function(data,type,row,meta){
                  return '<input type="checkbox" name="chk[]" value='+data+'>';
              }},
              { "data": "username"},
              { "data": "realname" },
              { "data": "groupname" },
              { "data": "rolename" },
              { "data": "status", "render": function(data,type,row,meta){
                  if (data==0){
                      return '<span id="showStatus">禁用</span>';
                  }else{
                      return '<span id="showStatus">正常</span>';
                  }
              }},
              { "data": "id", "render": function(data,type,row,meta){
                  if (row.status==0){
                      return '<A data-toggle="modal" data-row="'+meta.row+'" data-target="#edituser" class="newcss1" style="margin-left: 5px;cursor:pointer;">编辑</A> '+
                          '<A id="showEnable"  onClick="show1(this,'+row.id+')" class="search-top newcss1" style="margin-left: 25px;text-align: center;cursor:pointer;" >启用</A>'+
                          '<A  data-toggle="modal" data-row="'+meta.row+'" data-target="#modal-deluser" class="newcss2" style="margin-left: 25px;cursor:pointer;">删除</A>';
                  }else{
                      return '<A data-toggle="modal" data-row="'+meta.row+'" data-target="#edituser" class="newcss1" style="margin-left: 5px;cursor:pointer;">编辑</A> '+
                          '<A id="showEnable"  onClick="show1(this,'+row.id+')" class="search-top newcss1" style="margin-left: 25px;text-align: center;cursor:pointer;" >禁用</A>'+
                          '<A  data-toggle="modal" data-row="'+meta.row+'" data-target="#modal-deluser" class="newcss2" style="margin-left: 25px;cursor:pointer;">删除</A>';
                  }
              }}
          ]
        });