`
ssy341
  • 浏览: 58428 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
文章分类
社区版块
存档分类
最新评论

Datatables中文API——回调函数

阅读更多
推荐是用ctrl+f查找使用,有写的不对的地方,也希望大家拍砖



更多datatables在http://dt.thxopen.com/ 欢迎大家来做客


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>' );
      }
    }
  } );
} );
复制代码
fnDrawCallback:draw画 ,这个应该是重绘的回调函数
$(document).ready( function() {
  $('#example').dataTable( {
    "fnDrawCallback": function( oSettings ) {
      alert( 'DataTables 重绘了' );
    }
  } );
} );
fnFooterCallback:底部的回调函数,这个可以用来做总计之类的功能
$(document).ready( function() {
  $('#example').dataTable( {
    "fnFooterCallback": function( nFoot, aData, iStart, iEnd, aiDisplay ) {
      nFoot.getElementsByTagName('th')[0].innerHTML = "Starting index is "+iStart;
    }
  } );
} )
fnFormatNumber:顾名思义,格式化数字的显示方式
$(document).ready( function() {
  $('#example').dataTable( {
    "fnFormatNumber": function ( iIn ) {
      if ( iIn < 1000 ) {
        return iIn;
      } else {
        var
          s=(iIn+""),
          a=s.split(""), out="",
          iLen=s.length;
        
        for ( var i=0 ; i<iLen ; i++ ) {
          if ( i%3 === 0 && i !== 0 ) {
            out = "'"+out;
          }
          out = a[iLen-i-1]+out;
        }
      }
      return out;
    };
  } );
} );
fnHeaderCallback:表头的回调函数
$(document).ready( function() {
  $('#example').dataTable( {
    "fnHeaderCallback": function( nHead, aData, iStart, iEnd, aiDisplay ) {
      nHead.getElementsByTagName('th')[0].innerHTML = "Displaying "+(iEnd-iStart)+" records";
    }
  } );
} )
fnInfoCallback:datatables信息的回调函数
$('#example').dataTable( {
  "fnInfoCallback": function( oSettings, iStart, iEnd, iMax, iTotal, sPre ) {
    return iStart +" to "+ iEnd;
  }
} );
fnInitComplete:datatables初始化完毕后会调用这个方法
$(document).ready( function() {
  $('#example').dataTable( {
    "fnInitComplete": function(oSettings, json) {
      alert( 'DataTables 初始化完毕' );
    }
  } );
} )
fnPreDrawCallback:每一次绘datatables时候调用的方法
$(document).ready( function() {
  $('#example').dataTable( {
    "fnPreDrawCallback": function( oSettings ) {
      if ( $('#test').val() == 1 ) {
        return false;
      }
    }
  } );
} );
fnRowCallback:行的回调函数(所有行得回调函数)
$(document).ready( function() {
  $('#example').dataTable( {
    "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
      // 所有的a都加粗
      if ( aData[4] == "A" )
      {
        $('td:eq(4)', nRow).html( '<b>A</b>' );
      }
    }
  } );
} );
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
      } );
    }
  } );
} );
fnServerParams:向服务器传额外的参数
$(document).ready( function() {
  $('#example').dataTable( {
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "scripts/server_processing.php",
    "fnServerParams": function ( aoData ) {
      aoData.push( { "name": "more_data", "value": "my_value" } );
    }
  } );
} );
fnStateLoad:读取状态的回调函数
$(document).ready( function() {
  $('#example').dataTable( {
    "bStateSave": true,
    "fnStateLoad": function (oSettings) {
      var o;
      
     
//发送一个异步请求给服务器来返回数据
      //这是个同步的发送
      $.ajax( {
        "url": "/state_load",
        "async": false,
        "dataType": "json",
        "success": function (json) {
          o = json;
        }
      } );
      
      return o;
    }
  } );
} );
fnStateLoadParams:和上面的不知道什么区别,没用过
// Remove a saved filter, so filtering is never loaded
$(document).ready( function() {
  $('#example').dataTable( {
    "bStateSave": true,
    "fnStateLoadParams": function (oSettings, oData) {
      oData.oSearch.sSearch = "";
    }
  } );
} );


// Disallow state loading by returning false
$(document).ready( function() {
  $('#example').dataTable( {
    "bStateSave": true,
    "fnStateLoadParams": function (oSettings, oData) {
      return false;
    }
  } );
} );
fnStateLoaded:又是这个,加了ed 不知道意思没用过
// Show an alert with the filtering value that was saved
$(document).ready( function() {
  $('#example').dataTable( {
    "bStateSave": true,
    "fnStateLoaded": function (oSettings, oData) {
      alert( 'Saved filter was: '+oData.oSearch.sSearch );
    }
  } );
} );
fnStateSave:状态储存
$(document).ready( function() {
  $('#example').dataTable( {
    "bStateSave": true,
    "fnStateSave": function (oSettings, oData) {
      // Send an Ajax request to the server with the state object
      $.ajax( {
        "url": "/state_save",
        "data": oData,
        "dataType": "json",
        "method": "POST"
        "success": function () {}
      } );
    }
  } );
} );
fnStateSaveParams :状态储存参数,没用过,不明白
// Remove a saved filter, so filtering is never saved
$(document).ready( function() {
  $('#example').dataTable( {
    "bStateSave": true,
    "fnStateSaveParams": function (oSettings, oData) {
      oData.oSearch.sSearch = "";
    }
  } );
} );
分享到:
评论

相关推荐

    表格 demo datatables 回调

    在"表格 demo datatables 回调"中,"回调"可能指的是Datatables的事件回调或API方法,如`fnDrawCallback`,它会在表格重绘后触发,允许我们执行诸如调整列宽、添加自定义样式等操作。此外,`ajax.dataSrc`回调可用于...

    DataTables(二) —— 行分组信息展开与折叠的功能实现

    我们可以使用`createdRow`回调函数来自定义行的HTML,添加展开/折叠的图标。同时,需要监听`draw`事件来更新图标状态。 7. **自定义展开与折叠的样式** 使用CSS可以定制展开/折叠按钮的样式,例如设置图标颜色、...

    Jquery dataTable中文API中文文档

    ### JQuery DataTable API中文文档知识点概览 #### 一、简介 JQuery DataTable 是一个高度灵活且功能丰富的插件,能够将HTML表格转换成具有高级交互性的动态表格。它支持复杂的数据排序、搜索、分页等功能,并能很...

    DataTables API.rar

    这个"DataTables API.rar"压缩包很显然是关于如何使用DataTables API的资源集合,帮助开发者更深入地控制和操作表格数据。下面我们将详细讨论DataTables API以及与之相关的jq(jQuery)知识。 DataTables API提供了...

    datatables-1.9.4-API文档-中文版.zip

    包含翻译后的API文档:datatables-1.9.4-javadoc-API文档-中文(简体)版.zip; Maven坐标:org.webjars:datatables:1.9.4; 标签:webjars、datatables、中文文档、jar包、java; 使用方法:解压翻译后的API文档,用...

    dataTables中文网(离线版,外国网页没有离线)

    4. API参考:离线版可能缺少完整的API文档,这在开发过程中可能会造成不便。 如果你需要离线环境中使用DataTables,可以考虑复制一份本地服务器环境,模拟在线请求,将所需的数据和配置预先加载到本地。同时,定期...

    datatables-cn:Datatables—— jquery 插件中文网

    Datatables中文网 基于 jQuery 的表格插件,灵活,强大 | 1,如何使用? &lt;!--第一步:引入Javascript / CSS (CDN)--&gt; &lt;!-- DataTables CSS --&gt; &lt;link rel="stylesheet" type="text/css" href=...

    dataTables-1.6 API

    DataTables examples This DataTables package comes with a number of examples of how you can use this software, and demonstrates it's capabilities and flexibility.

    JQuery DataTables示例,包含分页、拖拽、导出

    **jQuery DataTables 深入理解与应用** jQuery DataTables 是一个强大且功能丰富的JavaScript库,用于增强HTML表格。它提供了各种高级特性,如分页、排序、过滤、搜索、数据加载以及更多,大大提升了用户体验。在这...

    datatables案例

    7. 用户交互:Datatables 提供了丰富的事件监听和回调函数,使得开发者能够根据用户的操作执行相应的逻辑,如行选择后的处理。 接下来,我们探讨如何实现这些功能: 1. 安装和引用 Datatables:首先要在 HTML 页面...

    DataTablesApi

    《深入理解DataTables API与Bootstrap整合》 在Web开发领域,数据展示是不可或缺的一部分,尤其在处理大量数据时,高效、美观且功能丰富的表格组件显得尤为重要。DataTables就是这样一款强大的JavaScript库,它提供...

    datatables-1.9.4-API文档-中英对照版.zip

    包含翻译后的API文档:datatables-1.9.4-javadoc-API文档-中文(简体)-英语-对照版.zip; Maven坐标:org.webjars:datatables:1.9.4; 标签:webjars、datatables、中英对照文档、jar包、java; 使用方法:解压翻译后...

    datatables_demo

    《datatables_demo——深入解析与应用》 Datatables是一款强大的JavaScript数据展示库,它能够将HTML表格转换为功能丰富的交互式数据展示工具。在“datatables_demo”这个项目中,我们将会探讨如何利用Datatables的...

    datatables

    - **扩展功能**:通过调用Datatables的API或使用预定义的插件,进一步增强表格功能。 3. **与jQuery其他表格插件的比较** - **Flextable**:相比于Flextable,Datatables提供了更全面的文档和社区支持,功能更加...

    dataTables导出功能

    在“dataTables导出功能”这个主题中,我们关注的是DataTables的一个关键特性:导出功能。这个特性允许用户将表格数据导出为多种格式,如CSV、PDF或Excel,方便数据存储和进一步分析。 DataTables的导出功能通常...

    [简单]DataTables简单示例

    6. 回调函数:DataTables支持多种回调函数,如`fnDrawCallback`,可以在数据加载后执行自定义操作。 7. 插件与扩展:DataTables有许多插件和扩展,如Buttons用于导出数据,Responsive用于响应式布局,FixedHeader...

    jquery DataTables-1.9.4

    4. **自定义列和数据**:开发者可以自定义每列的显示内容和样式,也可以通过回调函数处理数据,实现复杂的格式化或计算。 5. **扩展与插件**:DataTables 1.9.4版本支持多种扩展和插件,如列宽调整、固定列、行选择...

    datatables1.10.15示例代码

    6. **自定义事件和回调函数** 可以监听DataTables的各种事件,如`init`, `xhr`, `draw`等,并在事件触发时执行自定义代码。例如: ```javascript $('#example').on( 'draw.dt', function () { alert( 'Table re-...

    datatables最简单的模板

    9. **自定义事件和扩展**:Datatables允许添加自定义事件处理函数,以及使用众多的插件和扩展来增强功能,如按钮、固定列、导出数据等。 10. **模板应用**:"我的模板"可能是包含上述配置的一个实际应用示例,可以...

Global site tag (gtag.js) - Google Analytics