JavaScript
$(function() {
// 准备数据
var data = {
cols: [ // 定义列
{ width: 50, text: '#', type: 'number', flex: false, colClass: 'text-center' },
{ width: 'auto', text: '名称', type: 'string', flex: false, colClass: '' },
{ sort: 'down', width: 120, text: '时间', type: 'date', flex: true, colClass: '' },
{ width: 100, text: '类型', type: 'string', flex: true, colClass: 'text-center' },
{ sort: false, width: 400, text: '描述', type: 'string', flex: true, colClass: 'nobr' },
{ width: 'auto', text: '评分', type: 'number', flex: false, colClass: 'text-center text-important' },
{ width: 60, text: '操作', type: 'number', flex: false, colClass: 'text-center text-primary' }
],
rows: [ // 定义行
/*此行中的每一列数据存放在数组中,注意与列定义的顺序一致*/
{ checked: false/*取消选中*/, data: [1, "张三2", "2016-03-01", "任务", "例子文本...", 90, '<i class="icon icon-pencil"></i>'] },
{ checked: false, data: [2, "李四", "2016-03-023", "待办", "例子文本例子文本例子文本例子文本...", 80, '<i class="icon icon-pencil"></i>'] },
{ checked: false, data: [3, "王五", "2016-03-03", "项目", "例子文本例子文本例子文本例子文本例子文本例子文本例子文本...", 90, '<i class="icon icon-pencil"></i>'] },
{ checked: false, data: [4, "赵六", "2016-03-04", "任务", "例子文本例子文本例子文本...", 70, '<i class="icon icon-pencil"></i>'] },
{ checked: false, data: [5, "孙七", "2016-03-05", "项目", "例子文本例子文本...", 80, '<i class="icon icon-pencil"></i>'] }
]
};
// 初始化数据表格,empty方法作用是清空占位内容
$('#datatableExample').empty().datatable({
data: data,
checkable: true,
sortable: true,
//fixedLeftWidth: '30%', // 左侧固定列总宽度
//fixedRightWidth: '30%' // 又侧固定列总宽度
});
// 当点击按钮时,调用 $().datatable('load', new Data|function) 来更新数据表格
$('#updateDatatableBtn').on('click', function() {
$('#datatableExample').datatable('load', function(originData, datatable) {
//...