Datatables是一款jquery表格插件

Datatables

是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。

特点：
分页，即时搜索和排序
几乎支持任何数据源：DOM， javascript， Ajax 和 服务器处理
支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation

Data

处理模式(Processing modes)

DataTables 中有两种不同的方式处理数据(排序、搜索、分页等):
客户端处理（Client）—— 所有的数据集预先加载（一次获取所有数据），数据处理都是在浏览器中完成的【逻辑分页】。
服务器端处理（ServerSide）—— 数据处理是在服务器上执行（页面只处理当前页的数据）【物理分页】。

每种模式都有自己的优点和缺点,选择哪种模式是由你的数据量决定的。根据经验来看,数据少于 10,000 行你可以选择客户端模式,超过 10,000 行的使用服务器端处理。

数据源类型(Data source types)

DataTables 使用的数据源必须是一个数组，数组里的每一项将显示在你定义的行上面，DataTables 可以使用三种基本的 JavaScript 数据类型来作为数据源：

数组(Arrays [])

    
    
    
    
    
    

    
    

    
    
    



修改内容


    

    

        
Nmae
        
Position
        
Office
        
Extn.
        
Start date
        
Salary
    
    
    

    

        
Row 1 Data 1

    
    

        
Row 2 Data 1

    
    

对象(objects {})

对象看起来很直观，使用起来和数组略有不同。如果你已经参考了 API ，你可以知道通过对象获得特定的数据非常简单， 你只需要使用一个属性的名字，而不是记住这个数组的索引，比如data.name，而不是data[0]

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' }
        ]
    } );

实例(new myclass())

DataTables 从实例中获取数据显示是非常有用的，这些实例可以定义成抽象的方法来更新数据。
注意,name,salary,position 是属性而office是一个方法，DataTables 允许这样使用，他会自动识别，详细见手册 columns.dataOption 

以上为实例作为数据源的实例，效果如下：

function Employee ( name, position, salary, office ) {
        this.name = name;
        this.position = position;
        this.salary = salary;
        this._office = office;
 
        this.office = function () {
            return this._office;
        }
    };
 
    $('#example').DataTable( {
        data: [
            new Employee( "Tiger Nixon", "System Architect", "$3,120", "Edinburgh" ),
            new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh" )
        ],
        columns: [
            { data: 'name' },
            { data: 'salary' },
            { data: 'office()' },
            { data: 'position' }
        ]
    } );

给行绑定选中事件

    
    
    
    
    
    

    
    

    
    
    



修改内容
给按钮绑定点击事件


    

    

        
Nmae
        
Position
    
    
    

    

        
Row 1 Data 1
    
    

        
Row 2 Data 1
    
    

。。。