版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/sinosoft12345/article/details/81062730
今天同事问了我一个bootstrap datatable列表展示需要的问题，到官网看了一下教程，然后在自己的项目中测试了一下，没有效果，然后开始了百度搜索，针对序号的问题，众说纷纭，代码也是各式各样的，通过认真研究，终于找到了解决方案，请看下面的代码内容：
interTable = $('#interTable').dataTable({
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": false,
"bAutoWidth": false,
"paging": true, //分页
"bProcessing": false,// 是否显示取数据时的那个等待提示
"iDisplayLength": 10, //默认条数
"oLanguage": { // 国际化配置
"sProcessing": "正在获取数据，请稍后...",
"sLengthMenu": "显示 _MENU_ 条",
"sZeroRecords": "没有找到数据",
"sInfo": "从 _START_ 到 _END_ 条记录 总记录数为 _TOTAL_ 条",
"sInfoEmpty": "记录数为0",
"sInfoFiltered": "(全部记录数 _MAX_ 条)",
"sInfoPostFix": "",
"oPaginate": {
"sFirst": "第一页",
"sPrevious": "上一页",
"sNext": "下一页",
"sLast": "最后一页"
}
},
"bServerSide": false,
"sAjaxSource": "/demand/list",
"sAjaxDataProp": "data",
"fnServerData": loadData, // 获取数据的处理函数
"aoColumns": [
{
sTitle: '序号',
data: null,
className: 'text-center whiteSpace',
render:function(data,type,row,meta) {
return meta.row + 1 + meta.settings._iDisplayStart;
}
},
{'mData': 'id', 'sTitle': '需求ID', 'sName': 'id'},
// {'mData': 'xuhao', 'sTitle': '需求ID', 'sName': 'xuhao'},
{'mData': 'name', 'sTitle': '需求名称', 'sName': 'name'},
{'mData': 'type', 'sTitle': '需求类型', 'sName': 'type'},
{'mData': 'application', 'sTitle': '上线应用', 'sName': 'application'},
{'mData': 'status', 'sTitle': '需求状态', 'sName': 'status'},
// {'mData': 'priority', 'sTitle': '优先级', 'sName': 'priority'},
// {'mData': 'flow', 'sTitle': '切量开关', 'sName': 'flow'},
{'mData': 'product', 'sTitle': '产品', 'sName': 'product'},
{'mData': 'development', 'sTitle': '开发', 'sName': 'development'},
{'mData': 'test', 'sTitle': '测试', 'sName': 'test'},
{'mData': 'developmenttime', 'sTitle': '开发时间', 'sName': 'developmenttime'},
{'mData': 'testtime', 'sTitle': '测试时间', 'sName': 'testtime'},
{'mData': 'linetime', 'sTitle': '预计上线时间', 'sName': 'linetime'},
{'mData': 'actualtime', 'sTitle': '实际上线时间', 'sName': 'actualtime'},
{'mData': 'isfinish', 'sTitle': '需求进度', 'sName': 'isfinish'},
{'mData': 'id', 'sTitle': '操作', 'sName': 'id'}
],
"aoColumnDefs": [
{
"aTargets": [-1], "mRender": function (data, type, full) {
return "<button style='margin-right: 3px;' class='btn btn-primary' title='编辑' data-toggle=\"modal\" data-target=\"#modal-inter-edit\" onclick='editFun(" + data + ")' type='button'><i class='fa fa-edit'></i></button>" +
"<button style='margin-right: 3px;' class='btn btn-primary' title='提测' data-toggle=\"modal\" data-target=\"#modal-inter-sendEmail\" onclick='sendEmai(" + data + ")' type='button'><i class='fa fa-envelope'></i></button>" +
// "<button class='btn btn-danger' onclick='(" + data + ")' title='删除' type='button'><i class='fa fa-trash-o'></i></button>";+
"<button class='btn btn-danger' onclick='delFun(" + data + ")' title='删除' type='button'><i class='fa fa-trash-o'></i></button>";
}
},
{
"aTargets": [13], "mRender": function (data, type, full) {
if (full.isfinish == '是') {
return "<span class='label label-success'>正常</span>";
} else {
return "<span class='label label-danger'>延期</span>";
}
}
},
{
"aTargets": [1], "mRender": function (data, type, full) {
return "<a style='cursor:pointer;' onclick='detail(" + full.id + ")' data-toggle=\"modal\" data-target=\"#modal-inter-detail\" >" + data + "</a>";
}
}
]
});只需要在aoColumns节点添加这段代码即可
{
sTitle: '序号',
data: null,
className: 'text-center whiteSpace',
render:function(data,type,row,meta) {
return meta.row + 1 + meta.settings._iDisplayStart;
}
},展示效果如下：
