Ajax

起始版本号:1.10.0

从一个数据源获取数据给表格显示

说明

使用这个参数可以让Datatables从一个数据源获取数据来显示表格,Datatables接收数组,对象类型的数据,可以参考 JavaScript数据数据源Ajax数据源

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

ajax接收三种类型的参数:

数据类型

string

描述:

这个是最简单的应用,ajax指定一个返回数据的url,这个是多个形式的比如json.txt、json.txt、jsonlist.action、jsonlist.jsp、jsonlist.php……
Datatables默认接收的是一个属性为 data,如果你返回的数据不是这样,你需要使用 ajax.dataSrcOption columns.dataSrc 1不定时一讲 columns.dataSrc 2不定时一讲 来处理

默认的数据(对象)格式如下:

{
"data": [
{ "name": "Tiger Nixon", "position": "System Architect", "salary": "$3,120", "start_date": "2011/04/25", "office": "Edinburgh", "extn": "5421" },
……
]
}
默认的数据(数组)格式如下:
{
"data": [
[ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$3,120" ],
……
]
}

上面的数据该怎么给Datatables显示呢?先看对象的:

$('#example').dataTable( {
  "ajax": "data.json",
  "columns":[
      {"data":"name"},
      {"data":"position"},
      {"data":"salary"},
      {"data":"start_date"},
            {"data":"office"},
            {"data":"extn"}
  ]
} );
数组:
$('#example').dataTable( {
  "ajax": "data.json"
} );

object

描述:

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

一个简单的例子:
$('#example').dataTable( {
  "ajax": {
    "url": "data.json",
    "type": "POST"
  }
} );

function ajax( data, callback, settings )

描述:

作为一个函数,这个可以完全自己控制Ajax请求,请求参数,返回的数据都可以不受Datatables的影响。事实上你可以使用非Ajax请求,而直接使用本地储存。

你可以直接从本地数据库获取数据交给 callback去处理

例子如下:

$('#example').dataTable( {
  "ajax": function (data, callback, settings) {
    callback(
      JSON.parse( localStorage.getItem('dataTablesData') )
    );
  }
} );

注意:在1.10.6+, 当使用了 ajax 属性后, xhr 事件会被触发(即使没有ajax请求)

参数:

示例

更改Ajax的请求方式

$('#example').dataTable( {
  "ajax": {
    "url": "data.json",
    "type": "POST"
  }
} );

添加额外的参数发送到服务器

$('#example').dataTable( {
  "ajax": {
    "url": "data.json",
    "data": function ( d ) {
      return $.extend( {}, d, {
        "extra_search": $('#extra').val()
      } );
    }
  }
} );

添加额外的参数发送到服务器

$('#example').dataTable( {
  "ajax": {
    "url": "data.json",
    "data": function ( d ) {
        d.extra_search = $('#extra').val();
    }
  }
} );

操作服务器返回的数据添加链接,这个使用 columns.renderOption columns.render 1不定时一讲 columns.render 2不定时一讲 columns.render 3不定时一讲 columns.render 4不定时一讲 也可以达到效果,这里只是演示怎么操作返回的数据

$('#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') )
    );
  }
} );

相关

下面的选项是直接相关的,也可能是您的应用程序的开发非常有用。

http://datatables.net/reference/option/ajax

Translation from DataTables.net, with permission