【jQuery plug-in】DataTables

1. DOM Position

dataTableOption.dom = '<"top"<"pull-left"l><"pull-right"f>>rt<"bottom"<"pull-left"i><"pull-right"p>><"clear">'；

 

除了l, f, i, p之外，r - Processing， t - Table，rt一般都一起出现。

其他的尖括号中的都是表示显示的位置，字面意思。

 

2. Columns

table中的表头部分是直接写在html中的。

.html
<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start Date</th>
            <th>Salary</th>
        </tr>
    </thead>
</table>                      

如果获取的数据为一个array中包含多个object，则可以直接用object中的字段赋值。

dataTableOption.columns = [
    {data: "name"},
    {data: "position"},
    {data: "office"},
    {data: "age"},
    {data: "start_date"},
    {data: "salary"}    
]；

 

3.render

如果需要对<td></td>内的数据处理，则可以在columns定义的时候进行render。

比如说，在点击name的时候可以跳转到个人主页。

dataTableOption.columns = [
    {
        data: "name",
        render: function (data, type, row) {
            return '<a href="/person/'  + row.id + '">' + data + '</a>' 
        }
    }    
]

输入的参数中

data：前一行中给data赋值的字段

row：整个object