前端插件datatable.js的使用

一、引入js和css文件

<script src="js/plugins/dataTables/datatables.min.js"></script>

<link href="css/plugins/dataTables/datatables.min.css" rel="stylesheet">

二、编写初始化js代码

$('.dataTables-example').DataTable({
	dom: '<"html5buttons"B>lTfgitp',
	bSort: false,      //是否排序
	bPaginate: false,  //是否分页
	bFilter: false,    //是否查询
	bInfo: 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": ": 以降序排列此列"
		}
	},
	buttons: [      //按钮配置

		{extend: 'print',text: '打印',title:'${planName }',
		 customize: function (win){   //表格css配置
				$(win.document.body).addClass('white-bg');
				$(win.document.body).css('font-size', '10px');

				$(win.document.body).find('table')
						.addClass('compact')
						.css('font-size', 'inherit');
		}
		}
	]

});

官方文档地址：http://www.datatables.club/manual/