zoukankan      html  css  js  c++  java
  • JQuery DataTable的配置项及事件

    当我们需要在加载或者显示表格的时候,改变jquery datatable 的数据,或增加一些html标签处理。

    可以通过Jquery DataTable的回调函数处理。

    实例代码:

    复制代码
    if (oTable != null) { oTable.fnDestroy(); };
    var detail="../Pages/detail/detail.aspx?oper=edit&id=";
    oTable = $("#TableSuspectList").dataTable({
    "aaData": tabledata, "bPaginate": false, "sPaginationType": "full_numbers",
    "bPaginate": true, //翻页功能
    "bLengthChange": false, //改变每页显示数据数量
    "iDisplayLength": 10,
    "oLanguage": {
    "sProcessing": "正在加载中......",
    "sLengthMenu": "每页显示 _MENU_ 条记录",
    "sZeroRecords": "正在加载中......",
    "sEmptyTable": "表中无数据存在!",
    "sInfo": "当前显示 _START_ 到 _END_ 条,共 _TOTAL_ 条记录",
    "sInfoEmpty": "显示0到0条记录",
    "sInfoFiltered": "数据表中共为 _MAX_ 条记录",
    "sSearch": "搜索",
    "oPaginate": {
    "sFirst": "首页",
    "sPrevious": "上一页",
    "sNext": "下一页",
    "sLast": "末页"
    }
    },
    "sScrollY": "100%", "sScrollX": "100%",
    "bFilter": false, "bProcessing": false,
    "bScrollInfinite": false,
    "bInfo": false, "bDestroy": true,
    "fnCreatedRow": function (nRow, aData, iDisplayIndex) { 
    $('td:eq(7)', nRow).html("<a href="javascript:void(0);" 
     onclick="OpenTab('" + aData[1] + ":详情','" +  detail
     + aData[0] + "&LawCaseID="+LawCaseID + "');">详情</a>");
    return nRow;
    }
    });
    复制代码


    fnCookieCallback:还没有使用过回调函数说明:

    复制代码
    $(document).ready( function () {
      $('#example').dataTable( {
        "fnCookieCallback": function (sName, oData, sExpires, sPath) {
          // Customise oData or sName or whatever else here
          return sName + "="+JSON.stringify(oData)+"; expires=" + sExpires +"; path=" + sPath;
        }
      } );
    } );
    复制代码


     fnCreatedRow:顾名思义,创建行得时候的回调函数

    复制代码
    $(document).ready( function() {
      $('#example').dataTable( {
        "fnCreatedRow": function( nRow, aData, iDataIndex ) {
          // 为a的话字体加粗
          if ( aData[4] == "A" )
          {
            $('td:eq(4)', nRow).html( '<b>A</b>' );
          }
        }
      } );
    } );
    复制代码
    复制代码
    $(document).ready( function() {
      $('#example').dataTable( {
        "fnDrawCallback": function( oSettings ) {
          alert( 'DataTables 重绘了' );
        }
      } );
    } );
    复制代码

    fnDrawCallback:draw画 ,这个应该是重绘的回调函数

    fnInitComplete:datatables初始化完毕后会调用这个方法

    复制代码
    $(document).ready( function() {
      $('#example').dataTable( {
        "fnInitComplete": function(oSettings, json) {
          alert( 'DataTables 初始化完毕' );
        }
      } );
    } )
    复制代码
    复制代码
    $(document).ready( function() {
      $('#example').dataTable( {
        "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
          // 所有的a都加粗
          if ( aData[4] == "A" )
          {
            $('td:eq(4)', nRow).html( '<b>A</b>' );
          }
        }
      } );
    } );
    复制代码

    fnRowCallback:行的回调函数(所有行得回调函数)

    fnServerData:这个是结合服务器模式的回调函数,用来处理服务器返回过来的数据

    复制代码
    // POST data to server
    $(document).ready( function() {
      $('#example').dataTable( {
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "xhr.php",
        "fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
          oSettings.jqXHR = $.ajax( {
            "dataType": 'json',
            "type": "POST",
            "url": sSource,
            "data": aoData,
            "success": fnCallback
          } );
        }
      } );
    } );
  • 相关阅读:
    状态模式
    简单密码再次加密
    服务层定义自己的服务异常类
    必备网络基础知识(持续补充)
    MongoDB基础入门
    Git命令整理
    算法基础(四)
    RabbitMQ消息队列
    设计模式(23种)
    二叉树知识点
  • 原文地址:https://www.cnblogs.com/telwanggs/p/8660011.html
Copyright © 2011-2022 走看看