JS dataTables

原文地址：

http://www.cnblogs.com/haogj/archive/2011/03/04/1971328.html

 

数据来源有四种：

1. 网页DOM对象

$(document).ready(function () {

    $(‘#example').dataTable;

)};

 

2. 数组

aaData 变量类型为数组，其中每个元素是一个数组，代表一行内容

每个表示行的元素，数组长度必须相同，否则出错

aoColumns 定义表格的列

对列对象，sTitle定义列的标题，sClass定义列的样式

 

3. AJAX, 通过向服务器发出请求获得

以Ajax方式直接获取服务器上的符合aaData格式的文件内容

 

4. 服务器

sAjaxSouce 指定ajax对象的url，通常为get方式，可通过连接?parm1=a&parm2=b...的方式附加get的参数。在服务器端通过req.query.parm1的方式获取参数。返回数据必须为JSON格式。

 

服务器端应返回JSON格式的数据：

iTotalRecords    int    实际行数

iTotalDisplayRecords    int    过滤后的实际行数

sEcho    String    来自客户端的sEcho无变动的复制品

sColumns    String    可选，逗号分隔的列名

aaData    array array mixed    表格中的实际数据

 

基本设置：

dataTables表格在页面上必须通过thead和tbody进行说明

在声明thead时能否指定表格第一行的样式？

 

设置参数

bPaginate    是否分页，默认为true，分页

iDisplayLength    每页显示行数，默认为10

sPaginationType    分页样式，two_buttons 默认选项，只有上一页下一页按钮；full_numbers 包括页数导航

bLengthChange    是否允许用户通过下拉列表选取分页行数，10，25，50， 100。需要bPaginate支持，默认为true

bFilter    启用或禁止过滤，默认为true。如果设置启用但要关闭默认的过滤输入框，应使用sDom

bInfo    是否允许显示列表信息，默认为true

 

参数设置方法：

$(function () {

    $(‘#example’).dataTable(

    {

        iDisplayLength: 20,

        sPaginationType: full_numbers 

     });

});