ajax 异步获取数据填充到表格显示(ajax) 文档(Options & API) DataTables中文网

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

安静的甘蔗 · 解决ajax动态生成的数据无法获取html标 ...· 1 月前 ·

鼻子大的松鼠 · django中ajax的GET, ...· 1 月前 ·

高大的烤红薯 · 请求配置 | UNI-AJAX· 1 月前 ·

淡定的打火机 · ajax调用Controller为什么会返回 ...· 1 月前 ·

粗眉毛的熊猫 · jquery ajax向spring ...· 1 月前 ·

满身肌肉的鸭蛋 · 鹿晗MINI数字专辑《π-volume.2》 ...· 8 月前 ·

旅行中的书包 · 戴琳向吴兴涵事件女主道歉：受他人挑拨说了诋毁 ...· 1 年前 ·

深情的绿茶 · 火车硬座、高铁动车、国内经济舱座位分布表_硬 ...· 1 年前 ·

潇洒的课本 · 女生右手无名指戴戒指代表什么意思，除了已婚， ...· 1 年前 ·

慷慨大方的竹笋 · Amazon Live· 1 年前 ·

使用这个参数可以让 DataTables 像使用jQuery ajax 一样从一个数据源获取数据，最终获取到返回的数据来显示表格，DataTables 支持 JavaScript数组，JSON数据，可以参考 JavaScript数据数据源、 Ajax数据源

当你使用对象数组作为数据源时，你需要使用 columns.data Option 来匹对对象的属性，如果使用的是纯数组则不需要使用，DataTables 会默认按照数组的顺序显示每一个行数据

ajax 接收三种类型的参数：


    string

- 设置获取数据的url


    object

- 和 jQuery.ajax


     function

- 自定义获取数据的功能

类型(Type)

这个选项能够接受以下类型的参数：

string

这个是最简单的应用， ajax 指定一个返回数据的url，这个是多个形式的比如 json.txt、json.txt、jsonlist.action、jsonlist.jsp、jsonlist.php……

Datatables默认接收的是一个属性为 data ，如果你返回的数据不是这样，你需要使用 ajax.dataSrc Option

默认的数据（对象）格式如下：

//data.json返回数据格式如下
    "data": [
        { "name": "Tiger Nixon", "position": "System Architect", "salary": "$3,120", "start_date": "2011/04/25", "office": "Edinburgh", "extn": "5421" },
        // row 2 data source,
        // etc
//如下代码初始化
$('#example').DataTable({
    "ajax": "data.json",
    "columns": [
        {"data": "name"},
        {"data": "position"},
        {"data": "salary"},
        {"data": "start_date"},
        {"data": "office"},
        {"data": "extn"}
默认的数据（数组）格式如下：

//data.json返回数据格式如下 "data": [ ["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$3,120"], ...... //如下代码初始化 $('#example').DataTable( { "ajax": "data.json" } );

object

接收一个对象，其用法类同于 jQuery.ajax 这里只介绍不相同的，没有列出的参考jQuery文档即可，可以同样适用

data ( ajax.dataOption ) - 与jQuery一样，接收一个对象，这里Datatables对他做出扩展，还可以接收 function，作为 function 时可以操作请求参数，在实际应用中，可以在此函数里加入自定义的条件传到服务器。这个方法在1.9-版本中为 fnServerParams。

dataSrc（ ajax.dataSrcOption ） - 如果 DataTables 是通过 ajax 获取取数据，默认情况下，DataTables会去读取返回数据中的 data（在1.9-中是aaData）对象。这个方法已经取代了1.9-中的 sAjaxDataProp

success 这个是在Datatables内部调用的，不能覆盖使用，如果你不满意Datatables的实现，你可以使用 ajax.dataSrcOption 处理，或者是把 ajax 作为一个函数使用（见下面的说明）

一个简单的例子：

$('#example').dataTable( {
  "ajax": {
    "url": "data.json",
    "type": "POST"
} );
function ajax( data, callback, settings )
描述(Description):
作为一个函数，这个可以完全自己控制Ajax请求，请求参数，返回的数据都可以不受 DataTables 的影响。事实上你可以使用非Ajax请求，而直接使用本地储存。你可以直接从本地数据库获取数据交给 callback 去处理
例子如下：

$('#example').DataTable( {
  "ajax": function (data, callback, settings) {
    callback(
      JSON.parse( localStorage.getItem('dataTablesData') )
} );
注意：在1.10.6+， 当使用了 ajax 属性后，
    xhrEvent
事件会被触发（即使没有ajax请求）
参数(Parameters):
    "url": "data.json",
    "data": function ( d ) {
        d.extra_search = $('#extra').val();
} );
添加额外的参数发送到服务器(适用服务器模式)

$('#example').DataTable( {
  "serverSide":true,
  "ajax": {
    "url": "data.json",
    "data": function ( d ) {
      return $.extend( {}, d, {
        "extra_search": $('#extra').val()
      } );
} );
操作服务器返回的数据添加链接，这个使用

    columns.renderOption
也可以达到效果，这里只是演示怎么操作返回的数据

$('#example').DataTable( {
  "ajax": {
    "url": "data.json",
    "dataSrc": function ( json ) {
      for ( var i=0, ien=json.length ; i<ien ; i++ ) {
        json[i][0] = '<a href="/message/'+json[i][0]+'">View message</a>';
      return json;
} );
获取本地的数据

$('#example').dataTable( {
  "ajax": function (data, callback, settings) {
    callback(
      JSON.parse( localStorage.getItem('dataTablesData') )
} );
相关属性(Related)
下面的选项是直接相关的，也可能是您的应用程序的开发非常有用。