带按钮的DataTables表格
这是一个带按钮DataTables表格。
其中下列文件是必要的文件：
接下来是完整的代码：
DataTables测试
var dataSet = [
['Internet Explorer 4.0','Win 95+','4','X','19'],
['Internet Explorer 5.0','Win 95+','5','C','19'],
['Internet Explorer 5.5','Win 95+','5.5','A','19'],
['Internet Explorer 6','Win 98+','6','A','19'],
['Internet Explorer 7','Win XP SP2+','7','A','19'],
['AOL browser (AOL desktop)','Win XP','6','A','19']
];
$(document).ready(function() {
var selected = [];
$('#demo').html( '' );
var table = $('#example').dataTable( {
"data": dataSet,//数据源
"columns": [
{ "title": "设备名称"},
{ "title": "设备状态" },
{ "title": "供电类型", "class": "center " },
{ "title": "设备位置", "class": "center" },
{ "title": "当地温度", "class": "center" },
{ "title": "操作", "class": "center" }
],
"aoColumnDefs":[//设置列的属性，此处设置第一列不排序
{"bSortable": true, "aTargets": [0]},{ "class": "tn", "targets": [ 0 ] },
{
"targets": -1,
"class": "but_xq",
"data": null,
"defaultContent": " "
}
],
"aaSorting": [[1, "desc"]], //给列表排序 ，第一个参数表示数组 (由0开始)。1 表示Browser列。第二个参数为 desc或是asc
"oLanguage": {//插件的汉化
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "抱歉， 没有找到",
"sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
"sInfoEmpty": "没有数据",
"sInfoFiltered": "(从 _MAX_ 条数据中检索)",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "前一页",
"sNext": "后一页",
"sLast": "尾页"
},
"sZeroRecords": "没有检索到数据",
"sProcessing": "![]()
",
"sSearch": "搜索"
},
"lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "全部"]]
} );
/**
* 电池信息
*/
$('a#dianchi').on( 'click', 'a#dianchi', function () {
var data = $('#example').DataTable().row($(this).parents('tr')).data();
} );
/**
* 电源信息
*/
$('a#dianyuan').click(function () {
var data = $('#example').DataTable().row($(this).parents('tr')).data();
} );
/**
* 详细信息
*/
$('a#xiangxi').click(function () {
var data = $('#example').DataTable().row($(this).parents('tr')).data();
} );
} );
推荐一下，我的群：789826996
里面的代码是参考了这位大牛的（https://blog.csdn.net/ghgzczxcvxv/article/details/47024015），在此谢谢这位大神！