Datatable 数据源

数据源类型

Datatable可以使用三种基本的JavaScript数据类型作为数据源

• 数组(Arrays[])
• 对象(objects{})
• 实例(new myclass())
  目前使用过的为前两种，现以前两种为例进行讲解

数组(Arrays)

当使用数组作为数据源,每个数组元素的数量必须等于表中的列数

var data = [
    [
        "Tiger Nixon",
        "System Architect",
        "Edinburgh",
        "5421",
        "2011/04/25",
        "$3,120"
    ],
    [
        "Garrett Winters",
        "Director",
        "Edinburgh",
        "8422",
        "2011/07/25",
        "$5,300"
    ]
];

//然后 DataTables 这样初始化：
$('#example').DataTable( {
    data: data
} );

对象(Objects)数组

使用对象前，需要明确告诉 DataTables 那个属性对应那一列

var data = [
      {
          "name":       "Tiger Nixon",
          "position":   "System Architect",
          "salary":     "$3,120",
          "start_date": "2011/04/25",
          "office":     "Edinburgh",
          "extn":       "5421"
      },
      {
          "name":       "Garrett Winters",
          "position":   "Director",
          "salary":     "$5,300",
          "start_date": "2011/07/25",
          "office":     "Edinburgh",
          "extn":       "8422"
      }
  ];
      //object可以如下初始化表格
  $('#example').DataTable( {
      data: data,
      //使用对象数组，一定要配置columns，告诉 DataTables 每列对应的属性
      //data 这里是固定不变的，name，position，salary，office 为你数据里对应的属性
      columns: [
          { data: 'name' },
          { data: 'position' },
          { data: 'salary' },
          { data: 'office' }
      ]
  } );

数据源

DataTables 支持三种数据源显示：

• DOM
• Ajax
• JavaScript
  目前使用过前两种，现以前两种为例进行讲解

DOM

DataTables 初始化后，它会自动检查表格中的数据，如果存在即作为表显示的数据，这是使用 DataTables 最简单的方法，渲染已经存在的table
注意,当使用DOM显示表,DataTables 将会把数据当做数组作为数据源
DataTables还可以直接把 DOM 数据转化为自己的内部数据对象，示例如下：

<button id="table_id_example_button">获取选中的行</button>
<table id="table_id_example" class="display">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
        </tr>
    </tbody>
</table>

$(document).ready( function () {
    var table = $('#table_id_example').DataTable({
         //这样配置后，即可用DT的API来访问表格数据
        columns: [
            {data: "column1"},
            {data: "column2"}
        ]
    });
    //给行绑定选中事件
     $('#table_id_example tbody').on( 'click', 'tr', function () {
        if ($(this).hasClass('selected')) {
            $(this).removeClass('selected');
        }
        else {
            table.$('tr.selected').removeClass('selected');
            $(this).addClass('selected');
        }
    } );
    //给按钮绑定点击事件
    $("#table_id_example_button").click(function () {
        var column1 = table.row('.selected').data().column1;
        var column2 = table.row('.selected').data().column2;
        alert("第一列内容："+column1 + "；第二列内容： " + column2);
    });
} );

AJAX数据源

$(document).ready(function() {
    $('#example').DataTable( {
        "ajax": '{% url "phone:operate_query_spread" %}?',
        "columns": [
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "extn" },
            { "data": "start_date" },
            { "data": "salary" }
        ]
    } );
} );

参数链接：http://datatables.club/manual/data/