ajax 异步获取数据填充到表格显示(ajax)

最低支持版本:DataTables 1.10


描述(Description)

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

当你使用对象数组作为数据源时,你需要使用 columns.dataOption 来匹对对象的属性, 如果使用的是纯数组则不需要使用,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.dataSrcOption columns.dataSrc 1不定时一讲 columns.dataSrc 2不定时一讲 来处理

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//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"}
    ]
});

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

1
2
3
4
5
6
7
8
9
10
11
12
//data.json返回数据格式如下

{
    "data": [
        ["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$3,120"],
        ......
    ]
}

//如下代码初始化

$('#example').DataTable( {
  "ajax": "data.json"
} );

object

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

一个简单的例子:

1
2
3
4
5
6
$('#example').dataTable( {
  "ajax": {
    "url": "data.json",
    "type": "POST"
  }
} );

function ajax( data, callback, settings )

描述(Description):

作为一个函数,这个可以完全自己控制Ajax请求,请求参数,返回的数据都可以不受 DataTables 的影响。事实上你可以使用非Ajax请求,而直接使用本地储存。你可以直接从本地数据库获取数据交给 callback 去处理

例子如下:

1
2
3
4
5
6
7
$('#example').DataTable( {
  "ajax": function (data, callback, settings) {
    callback(
      JSON.parse( localStorage.getItem('dataTablesData') )
    );
  }
} );

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

参数(Parameters):

例子(Example)

ajax访问json格式文件获取数据

1
2
3
$('#example').DataTable( {
  "ajax": "data.json"
} );

更改Ajax的请求方式

1
2
3
4
5
6
$('#example').DataTable( {
  "ajax": {
    "url": "data.json",
    "type": "POST"
  }
} );

添加额外的参数发送到服务器(注意:下列方式不适用于服务器模式)

1
2
3
4
5
6
7
8
$('#example').DataTable( {
  "ajax": {
    "url": "data.json",
    "data": function ( d ) {
        d.extra_search = $('#extra').val();
    }
  }
} );

添加额外的参数发送到服务器(适用服务器模式)

1
2
3
4
5
6
7
8
9
10
11
$('#example').DataTable( {
  "serverSide":true,
  "ajax": {
    "url": "data.json",
    "data": function ( d ) {
      return $.extend( {}, d, {
        "extra_search": $('#extra').val()
      } );
    }
  }
} );

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

1
2
3
4
5
6
7
8
9
10
11
$('#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;
    }
  }
} );

获取本地的数据

1
2
3
4
5
6
7
$('#example').dataTable( {
  "ajax": function (data, callback, settings) {
    callback(
      JSON.parse( localStorage.getItem('dataTablesData') )
    );
  }
} );

相关属性(Related)

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

API

API

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

Translation from DataTables.net, with permission

百度站内搜索

Google站内搜索

赞助我们

赞助我们

您的支持,将是我们前进的最大动力……