DataTables 入门
1 / 9 / 创建于 7年前 /
不忘初心 的个人博客
DataTables 入门
先看一下效果
GITHUB:https://github.com/DataTables/DataTables
引入 CSS 和 JS
<!-- Datatables -->
<link href="/vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet">
<link href="/vendors/datatables.net-buttons-bs/css/buttons.bootstrap.min.css" rel="stylesheet">
<link href="/vendors/datatables.net-fixedheader-bs/css/fixedHeader.bootstrap.min.css" rel="stylesheet">
<link href="/vendors/datatables.net-responsive-bs/css/responsive.bootstrap.min.css" rel="stylesheet">
<link href="/vendors/datatables.net-scroller-bs/css/scroller.bootstrap.min.css" rel="stylesheet"> <!-- Datatables -->
<script src="/vendors/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/vendors/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script src="/vendors/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="/vendors/datatables.net-buttons-bs/js/buttons.bootstrap.min.js"></script>
<script src="/vendors/datatables.net-buttons/js/buttons.flash.min.js"></script>
<script src="/vendors/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="/vendors/datatables.net-buttons/js/buttons.print.min.js"></script>
<script src="/vendors/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js"></script>
<script src="/vendors/datatables.net-keytable/js/dataTables.keyTable.min.js"></script>
<script src="/vendors/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="/vendors/datatables.net-responsive-bs/js/responsive.bootstrap.js"></script>
<script src="/vendors/datatables.net-scroller/js/dataTables.scroller.min.js"></script>
<script src="/vendors/jszip/dist/jszip.min.js"></script>
<script src="/vendors/pdfmake/build/pdfmake.min.js"></script>
<script src="/vendors/pdfmake/build/vfs_fonts.js"></script><table id="datatable_list" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">我们为了方便修改datatables的属性所以我们单独定义出来
$.dataTablesSettings = {
"dom": "Bfrtip",
"bAutoWidth": false,
"bDeferRender": true,
"bLengthChange": true,
"bPaginate": true,
"bServerSide": true,
"bSort": true,
"buttons": [ //这个是她带给你的一些功能按键...
{
"extend": "copy",
"className": "btn-sm"
},
{
"extend": "csv",
"className": "btn-sm"
},
{
"extend": "excel",
"className": "btn-sm"
},
{
"extend": "pdfHtml5",
"className": "btn-sm"
},
{
"extend": "print",
"className": "btn-sm"
},
{
"extend": "pdf",
"className": "btn-sm"
}
],
"searching": false, //默认搜索框
"ordering": true,
"responsive": true,
"paginate": true,
"processing": true,
"serverSide": true,
"ajax": "https://后端接口的地址",
"dataSrc": 'data',
"aaSorting": [[0, 'desc']], //根据 columns 字段的 键位 0 , desc 倒序
"pageLength": 50, //分页数量
"stateSave": false,
"columns": [ //字段列们
{
"title": "ID", "data": "id", 'name': 'id'
},
{
"title": "时间", //标题
"data": "created_at", //服务端数据
'name': 'created_at', //别名
"render": function (data, type, row) { //如果有需求对返回数据的处理
if (data === undefined) { //如果是 undefined -,- 不介绍
return '未知'; //返回想展示出来的文字
}
//可以对(data)做你想做的事情 ......
return data; //返回她
}
},
{
"title": "操作",
"data": 'id',
'name': 'operation',
"render": function (data, type, row) {
return "<a href='详情页地址" + data + "'>查看详情</a>";
}
],
"language": { //自定义描述....
"sProcessing": "正在获取数据, 请稍后...",
"sLengthMenu": "显示 _MEUN_ 条",
"sZeroRecords": "没有找到数据",
"sInfo": "从 _START_ 到 _END_ 条记录 总记录数为 _TOTAL_ 条",
"sInfoEmpty": "记录数为0",
"sInfoFiltered": "(全部记录数 _MAX_ 条)",
"sInfoPostFix": "",
"sSearch": "全局搜索",
"sUry": "",
"oPaginate": {
"sFirst": "第一页",
"sPrevious": "上一页",
"sNext": "下一页",
"sLast": "最后一页"
},
"loadingRecords": "Please wait - loading...",
"processing": "DataTables is currently busy",
"search": "Apply filter _INPUT_ to table"
},
"fnServerParams": function (aoData) { //这个里面的 aoData就是会发送到后端的数据
//在这里 你可以对 发送到后端之前做任何事情.
aoData._rand = Math.random();
},
"fnDrawCallback": function () {
}
};如果我们想更改分页数的显示
//分页数设置
$('.pages_num').click(function () {
//修改 pageLength 的值
$.dataTablesSettings.pageLength = $(this).attr('describe');
//$(this).attr('describe') 等于 你想要设置的每页展示条数
dataTable.fnDestroy(false); //我们要重建它
dataTable = $("#datatable_list").dataTable($.dataTablesSettings);
});
//至于页码什么的前端都搞好了不用再管啦....自定义搜索
//$.dataTablesSettings.fnServerParams 我们在发送之前可以做任何事情
$.dataTablesSettings.fnServerParams = function (aoData) {
//aoData 在介绍一遍 这个是发送之前的数据
aoData._rand = Math.random();
//虽然里面有 search 这个数据 但是发现不给她 赋值成空的 [] 才能 push
aoData.search = [];
aoData.search.push(
//自定义搜索
{
"name": "search_input",
"value": $('#search_input').val(),
"regex": false
//里面可以在加一些你想要的 键值对
},
//开始时间
{
"name": "search_start_time",
"value": $('input[name=daterangepicker_start]').val(),
"regex": false
},
//结束时间
{
"name": "search_end_time",
"value": $('input[name=daterangepicker_end]').val(),
"regex": false
}
);
};
//搜索就是设置参数，然后销毁datatable重新再建一个
dataTable.fnDestroy(false);
dataTable = $("#datatable_list").dataTable($.dataTablesSettings);
//搜索后跳转到第一页 这个基本上不用 应为 默认就是会 回到第一页的....
//dataTable.fnPageChange(0);请求到后台的数据
draw:0
columns[0][data]:id
columns[0][name]:id
columns[0][searchable]:true
columns[0][orderable]:true
columns[0][search][value]:
columns[0][search][regex]:false
columns[1][data]:created_at
columns[1][name]:created_at
columns[1][searchable]:true
columns[1][orderable]:true
columns[1][search][value]:
columns[1][search][regex]:false
order[0][column]:0
order[0][dir]:desc
start:0
length:50
search[0][name]:search_input
search[0][value]:
search[0][regex]:false
search[1][name]:search_start_time
search[1][value]:2017-08-24 10:06:08
search[1][regex]:false
search[2][name]:search_end_time
search[2][value]:2017-09-22 10:06:08
search[2][regex]:false
search[3][name]:search_module_rule_const
search[3][value]:
search[3][regex]:false
search[4][name]:search_pay_states
search[4][value]:
search[4][regex]:false
search[5][name]:serch_monery
search[5][value]:0;100000000
search[5][regex]:false
_rand:0.5223628085815641
_:1506045968347后台返回数据
{
"draw":"1",
"recordsTotal":65,
"recordsFiltered":65,
"data":[
{
"id":91679,
"created_at":"2017-08-28 10:25:07"
}
}
]
}附赠一个时间控件的操作 daterangepicker
GITHUB:https://github.com/sensortower/daterangepi...
<!-- bootstrap-daterangepicker -->
<link href="/vendors/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">
<!-- bootstrap-datetimepicker -->
<link href="/vendors/bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css" rel="stylesheet"> <!-- bootstrap-daterangepicker -->
<script src="/vendors/moment/min/moment.min.js"></script>
<script src="/vendors/bootstrap-daterangepicker/daterangepicker.js"></script>
<!-- bootstrap-datetimepicker -->
<script src="/vendors/bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script> //时间搜索框
$('#search_time').daterangepicker({
timePicker: true,
timePickerIncrement: 5,
showDropdowns: true,
showWeekNumbers: true,
timePicker24Hour: true,
format: 'YYYY-MM-DD HH:mm:ss',
language: 'CN',
ranges: {
'今天': [moment(), moment()],
'昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'7天前': [moment().subtract(6, 'days'), moment()],
'30天前': [moment().subtract(29, 'days'), moment()],
'这个月': [moment().startOf('month'), moment().endOf('month')],
'上个月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
opens: 'left',
buttonClasses: ['btn btn-default'],
applyClass: 'btn-small btn-primary',
cancelClass: 'btn-small',
alwaysShowCalendars: true,
locale: {
applyLabel: '确认',
cancelLabel: '清除',
format: 'YYYY-MM-DD HH:mm:ss',
toLabel: 'To',
separator: ' 至 ',
customRangeLabel: '自定义',
daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
monthNames: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
firstDay: 1
}
});本作品采用《CC 协议》，转载必须注明作者和本文链接
本帖由 Summer
于 7年前 加精
关于 LearnKu
粤公网安备 44030502004330号
感谢分享
这个插件之前用过，很方便，language 这个记得可以放配置文件，否则每次写好麻烦
https://github.com/yajra/laravel-datatable...
有利有弊把, 基础的表格功能还是很好用的.
缺点就是报错难以调试.
如果想定制单元格内的东西比较难修改.
@Hexor 可以用 render 来定制单元格内容~
这货一直在更新，挺强大的，配合 x-editable，简直神了。唯一缺点就是调试很烦
@不忘初心 render 简单的html没问题, 但是用 vue 的语法 或者 blade 的语法好像就有问题
这个插件有个小问题，如果一次的数据超过了2000条，初始化的速度就会比较慢，只能通过服务器模式来解决……
多谢大佬分享