bootstrap datatable使用感受
datatable学习以及相关例子可以再这个地址看看：http://datatables.club/example/#api。
使用datatable实现的一个表格效果：
这个控件会自动实现显示条目，关键字搜索，分页，排序等等系列操作，只需要你引入相关库，调用api就可以。
所以在项目一开始，就选择了这个datatable。后来在使用过程中才发现，也许并不是那么顺利，而且在百度上找到的资料也不是很多，头都大了。
table代码：
<table id="bootstrap-data-table" class="table table-striped table-bordered">
<thead>
<tr>
<th>th>
<th>序号th>
<th>操作th>
<th>早晚课标题th>
<th>早晚课内容th>
<th>课程日期th>
<th>发布时间th>
<th>类型th>
<th>课程状态th>
tr>
thead>
<tbody>
<tr>
<td>
<label class="switch switch-3d switch-primary mr-3">
<input type="checkbox" class="switch-input">
<span class="switch-label">span>
<span class="switch-handle">span>
label>
td>
<td>1td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
tr>
<tr>
<td>
<label class="switch switch-3d switch-primary mr-3">
<input type="checkbox" class="switch-input">
<span class="switch-label">span>
<span class="switch-handle">span>
label>
td>
<td>2td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
tr>
tbody>
table>
然后再js中要操作：
<script type="text/javascript">
$(document).ready(function() {
$('#bootstrap-data-table-export').DataTable();
} );
</script>
然后就是要导入一些库，这里的库要自己去下载的：
<script src="assets/js/lib/data-table/datatables.min.js"></script>
<script src="assets/js/lib/data-table/dataTables.bootstrap.min.js"></script>
<script src="assets/js/lib/data-table/dataTables.buttons.min.js"></script>
<script src="assets/js/lib/data-table/buttons.bootstrap.min.js"></script>
<script src="assets/js/lib/data-table/jszip.min.js"></script>
<script src="assets/js/lib/data-table/vfs_fonts.js"></script>
<script src="assets/js/lib/data-table/buttons.html5.min.js"></script>
<script src="assets/js/lib/data-table/buttons.print.min.js"></script>
<script src="assets/js/lib/data-table/buttons.colVis.min.js"></script>
<script src="assets/js/init/datatables-init.js"></script>
导入样式文件：
<link rel="stylesheet" href="assets/css/lib/datatable/dataTables.bootstrap.min.css">
这样就能完成一个静态文件。
然后简单配置如下，通过静态data渲染数据。
<script>
var data = [['', '三体', '三体', '刘慈欣', '99.00', '出版社', '9825109093213516'],
['', '三体', '三体', '刘慈欣', '99.00', '出版社', '98251321399009516']];*/
jQuery(document).ready(function($) {
$(function () {
var table = $('#table-id').DataTable({
data: data,
"pagingType": "full_numbers",
"bSort": false, //排序功能
"language": {
"sProcessing": "处理中...",
"sLengthMenu": "显示 _MENU_ 项结果",
"sZeroRecords": "没有匹配结果",
"sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
"sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
},
"order": [[1, 'asc']],
"columnDefs" : [{
"searchable": false,
"orderable": true,
"targets": 0,
render : function(id, type, row, meta) {
return '+ id
+ '" type="checkbox" name="ids" value=' + id
+ '> id + '">';
}
}]
});
table.on('order.dt search.dt', function () {
table.column(0, {
search: 'applied',
order: 'applied'
}).nodes().each(function (cell, i) {
cell.innerHTML = i + 1;
});
}).draw();
$('#table-id tbody').on('click', 'tr', function () {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
} else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
});
});
});
</script>
但是项目开始了，我要实现的是从后台拿到json data数据再来填充datatable。于是看到datatable可以通过自带的ajax数据源来实现导入数据。所以就将上面的改写：
<script>
var datatable;
jQuery(document).ready(function($) {
//方案一，失败了，把用ajax请求服务器的数据赋值给datatable，再传到datatable中的data属性，依旧失效。
$.ajax({
url:"http://192.168.20.56:7799/user/list?page=1&order=id&asc=0",
type:"GET",
dataType : 'json',
success : function(result) {
alert("status = " + result.status + " maxcount = " + result.maxcount + " data = " + result.datas);
if (result.status == 0) {
datatable = result.datas;
}else{
}
},
error : function() {
alert("table--服务器请求异常");
}
});
$(function () {
var table = $('#table-id').DataTable({
data: datatable,
"pagingType": "full_numbers",
"bSort": false, //排序功能
"language": {
"sProcessing": "处理中...",
"sLengthMenu": "显示 _MENU_ 项结果",
"sZeroRecords": "没有匹配结果",
"sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
"sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
},
"order": [[1, 'asc']],
////方案二 根据api中写的，直接用ajax数据源，但是了就是不行不行不行不行
/*"ajax":{
url:"/user/list?page=1&order=id&asc=0",
type:"GET",
dataType : 'json',
success : function(result) {
alert("status = " + result.status + " maxcount = " + result.maxcount + " data = " + result.datas);
if (result.status == 0) {
}else{
}
},
error : function() {
alert("table--服务器请求异常");
}
},*/
"columns" : [ {
data : "id",
'sClass': "text-center"
},{
data : "id",
defaultContent : "",
'sClass': "text-center"
},{
data : "state",
defaultContent : "",
'sClass': "text-center"
},{
data : "name",
defaultContent : "",
'sClass': "text-center"
}, {
data : "nickname",
defaultContent : "",
'sClass': "text-center"
},{
data : "phonenum",
defaultContent : "",
'sClass': "text-center"
},{
data : "address",
defaultContent : "",
'sClass': "text-center"
}],
"columnDefs" : [{
"searchable": false,
"orderable": true,
"targets": 0,
render : function(id, type, row, meta) {
return '+ id
+ '" type="checkbox" name="ids" value=' + id
+ '> id + '">';
}
}]
});
table.on('order.dt search.dt', function () {
table.column(0, {
search: 'applied',
order: 'applied'
}).nodes().each(function (cell, i) {
cell.innerHTML = i + 1;
});
}).draw();
$('#table-id tbody').on('click', 'tr', function () {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
} else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
});
});
});
</script>
试了两种方案之后，实在是觉得脑壳大了，然后后台同事那边开始联调就很急了，所以就暂时放弃了，用来js最原始的方式给table动态添加数据。
我觉得bootstarp datatable确实是有点麻烦啊，那api写的无fuck说，网上资料又比较少。