
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