metronic 表格插件 datatables

官方網站：https://datatables.net/

css引入：datatables.min.css　　&&　　datatables.bootstrap.css　　&&　　bootstrap-datepicker3.min.css

j s 引入：datatable.js　　&&　　datatables.min.js　　&&　　datatables.bootstrap.js

html代碼：

<table class="table table-striped table-bordered table-hover table-checkable order-column" id="datatable_orders"></table>

　　

初始化：

var initTable1 = function () {
var table = $('#datatable_orders');//table ID

var oTable = table.dataTable({
"language": {
"aria": {
"sortAscending": ": activate to sort column ascending",
"sortDescending": ": activate to sort column descending"
},
"emptyTable": "No data available in table",
"info": "Showing _START_ to _END_ of _TOTAL_ entries",
"infoEmpty": "No entries found",
"infoFiltered": "(filtered1 from _MAX_ total entries)",
"lengthMenu": "_MENU_ entries",
"search": "Search:",
"zeroRecords": "No matching records found"
},
buttons: [
// { extend: 'print', className: 'btn dark btn-outline' },
// { extend: 'copy', className: 'btn red btn-outline' },
// { extend: 'pdf', className: 'btn green btn-outline' },
// { extend: 'excel', className: 'btn yellow btn-outline ' },
// { extend: 'csv', className: 'btn purple btn-outline ' },
// { extend: 'colvis', className: 'btn dark btn-outline', text: 'Columns'}
],

// setup responsive extension: http://datatables.net/extensions/responsive/
responsive: true,
paging: false,    //分頁
searching: false,    //搜索
ordering: true,    //排序
"order": [
[0, 'asc']
],

"lengthMenu": [
[5, 10, 15, 20, -1],
[5, 10, 15, 20, "All"] // change per page values here
],
"pageLength": 10,
"dom": "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", // horizobtal scrollable datatable
});
}

initTable1();