Jquery.datatables 学习笔记

1、js部分，datatables最重要的部分就在js的输出，除了table框架，都要用js控制，代码如下：

<script type="text/javascript">
$(document).ready(function() {
 var lastIdx = null;
 var table = $('#itTable').DataTable( {
  "bStateSave": true,//保存客户端搜索条件等状态
  "sPaginationType": "full_numbers",//出现首页、尾页
  "aLengthMenu": [[10, 25, 50,100, -1], ["10条", "25条", "50条","100条", "所有"]],
  "oLanguage" : {//修改语言
   "bAutoWith": true,
   "sProcessing": "正在加载中......",
            "sLengthMenu": "每页显示 _MENU_ 条记录",
            "sZeroRecords": "对不起，查询不到相关数据！",
            "sEmptyTable": "表中无数据存在！",
            "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
            "sInfoEmpty" : "0 / 0",
            "sInfoFiltered": "数据表中共为 _MAX_ 条记录",
            "sSearch": "搜索",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上一页",
                "sNext": "下一页",
                "sLast": "末页"}
  },
  "ajax": {
   "url": "<%=path %>/main/virtual/list",
   "dataType": "json"
  },
  "columns": [
     { "data": "id" ,orderable: false,"class":"displayNone"},
     { "data": "所在物理机" },
     { "data": "虚拟机名称" },
     { "data": "IP" },
     { "data": "系统" },
     { "data": "内存" },
     { "data": "使用人" },
     { "data": "创建时间" },
     { "data": "终止时间" },
     { "data": "状态" },
     { "data": "1级部门" },
     { "data": "2级部门"},
     { "data": "备注" },
     { "data": null,orderable: false,
      /* "mRender":function(data,type,full){//通过回调函数添加button按钮
       return "<input type='button' onclick='' value='"+data+"'/>";
      }  */
     },
     
    ],
  /* "columnDefs": [//可以隐藏某列
            {
                "targets": [ 0 ],
                "visible": false,
                "searchable": false,
                
            },
            {
             "targets":[3],
             "render":function(data,type,row){
                 return data+"("+row[3]+")";
                }
            },
  ], */
  
  dom: 'T<"clear">lfrtip',//自定义布局
        tableTools: {
         "sRowSelect": "os",//选中行高亮
            "aButtons": [//导出等功能
                "copy",
                "print",
<code class="js spaces"></code><code class="js plain">                {</code><div class="line number9 index8 alt2"><code class="js spaces"></code><code class="js string">"sExtends"</code><code class="js plain">: </code><code class="js string">"collection"</code><code class="js plain">,</code></div><div class="line number10 index9 alt1"><code class="js spaces"></code><code class="js string">"sButtonText"</code><code class="js plain">: </code><code class="js string">"Save"</code><code class="js plain">,</code></div><div class="line number11 index10 alt2"><code class="js spaces"></code><code class="js string">"aButtons"</code><code class="js plain">: [ </code><code class="js string">"csv"</code><code class="js plain">, </code><code class="js string">"xls"</code><code class="js plain">, </code><code class="js string">"pdf"</code> <code class="js plain">]</code></div><div class="line number12 index11 alt1"><code class="js spaces"></code><code class="js plain">}</code></div>
            ],
            "sSwfPath": "<%=path%>/swf/copy_csv_xls_pdf.swf" ,//配合aButtons 
        },
        "fnRowCallback":function(nRow,aData,iDataIndex){ //回调该行   配合columns使用实现自定义button
         var id = $('td', nRow).eq(0).text();
         var ip = $('td', nRow).eq(3).text();
         $('td:eq(-1)',nRow).html('<a class="updateRow">修改</a>'+
         '<a class="delRow" >删除</a>');
         return nRow;
        },  
        "createdRow": function ( row, data, index ) {// 初始化行时对数据进行过滤
            if (  new Date() >= new Date($('td', row).eq(8).text()) &&  $('td', row).eq(9).text() =='开机' ) {
                $('td', row).eq(8).addClass('fontLight');
            }
        },
 } );
 $('#itTable tbody').on( 'click', 'a.updateRow', function () {//点击事件 a.delRow css选择器delrow为class
  var id = $('td', $(this).parents('tr')).eq(0).text();
  var ip = $('td', $(this).parents('tr')).eq(3).text();
  window.open('<%=path%>/main/virtual/updateview?id='+id+'&ip_address='+ip+'&t_name=虚拟机', 'newwindow','width=700,height=500,top=150, left=350,  toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no');
 });
 $('#itTable tbody').on( 'click', 'a.delRow', function () {//点击事件 a.delRow css选择器delrow为class
  // 获取行及删除行
  /* var tr = $(this).parents('tr');
  var row = table.row(tr);
  row.remove().draw();
  table.row('.selected').remore().draw(); */
  var id = $('td', $(this).parents('tr')).eq(0).text();
  if(confirm('删除不可恢复，确定删除吗？')){
   $.ajax({
          type: "POST",
          url: "<%=path%>/main/virtual/del?id="+id,
          //data: {id:$("#id").val(), title:$("#title").val(),title_en:$("#title_en").val()},
          dataType: "html",
          success: function(data){
     window.location.href=window.location.href;
          },
          error:function(data){
           alert('删除错误');
          }
      });
  }
 } ); 
 //鼠标移动高亮显示
 /* $('#itTable tbody').on( 'mouseover', 'td', function () {
        var colIdx = table.cell(this).index().column;


        if ( colIdx !== lastIdx ) {
            $( table.cells().nodes() ).removeClass( 'highlight' );
            $( table.column( colIdx ).nodes() ).addClass( 'highlight' );
        }
    } ).on( 'mouseleave', function () {
        $( table.cells().nodes() ).removeClass( 'highlight' );
    } ); */
 new $.fn.dataTable.FixedHeader( table );// 顶部固定不动
} );
</script>

2、html方面很简单，如下：

<table id="itTable" class="display dataTables" cellspacing="0" width="100%"   align="center"  >
    <thead >
     <tr>
      <th>id</th>
      <th >所在物理机</th>
      <th >虚拟机名称</th>
      <th >IP</th>
      <th >系统</th>
      <th >内存</th>
      <th >使用人</th>
      <th >创建时间</th>
      <th >终止时间</th>
      <th >状态</th>
      <th >1级部门</th>
      <th >2级部门</th>
      <th >备注</th>
      <th >操作</th>
     </tr>
    </thead>


   </table>

3.附加自己整理的一点jquery datable 属性注释

/**
* @Time 2015-01-10 16:58:33
* 新增一些关于jquery datatable所用的参数属性。为了以后看jquery代码能够明白。
*
* processing : 开关，以指定当正在处理数据的时候，是否显示“正在处理”这个提示信息
* serverSide : 保证页面在加载时就请求后台，以及每次对 datatable 进行操作时也是请求后台
* columns : 配置具体列的属性，包括对应的数据列名，是否支持搜索，是否显示，是否支持排序等。
* columnDefs ：自定义列他的值为数组对象【targets ：表示具体需要操作的目标列，下标从 0 开始
* data: 表示我们需要的某一列数据对应的属性名
* render: 返回需要显示的内容。在此我们可以修改列中样式，增加具体内容】
* order[0][column]: 因为是二维的表格，因此只有一维需要排序，所以 order 的下标未 0. 该属性表示第几列需要排序。
* order[0][dir]: 排序方式 ASC | DESC
* search[value]: search 输入框中的值
* start: 其实记录位置
* length: 页面显示数量
* drawCallback：draw画，这个应该是重绘的回调函数
* createdRow：顾名思义，创建行得时候的回调函数
* bStateSave: true 保存客户端搜索条件等状态
* sPaginationType: "full_numbers" 出现首页、尾页
* mRender:function(data,type,full){ 通过回调函数添加button按钮
* sRowSelect: "os", 选中行高亮
*
* createdRow: function ( row, data, index ) { 初始化行时对数据进行过滤
*
* 后台参数说明
* draw: 表示请求次数
* recordsTotal: 总记录数
* recordsFiltered: 过滤后的总记录数
* data: 具体的数据对象数组
*/

Jquery.datatables 学习笔记

浏览过的版块