因为表格比较长客户要求左侧的部分列要固定,以及头部固定,并有搜索排序功能,找了很久终于找到一个比较好的插件,DataTable,网站:https://datatables.net/download/index,因为我用的是bootstrap风格的,就下载一样风格的DataTable样式,主要有3个样式文件javascript
<link rel="stylesheet" href="../../bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="../../plugins/datatables/dataTables.bootstrap.css"> <link rel="stylesheet" href="../../plugins/datatables/extensions/FixedColumns/css/fixedColumns.bootstrap.min.css">
以及几个js文件以及配置方法css
<script src="../../plugins/jQuery/jQuery-2.1.4.min.js"></script> <!-- Bootstrap 3.3.5 --> <script src="../../bootstrap/js/bootstrap.min.js"></script> <!-- DataTables --> <script src="../../plugins/datatables/jquery.dataTables.min.js"></script> <script src="../../plugins/datatables/dataTables.bootstrap.min.js"></script> <script src="../../plugins/datatables/extensions/FixedColumns/js/dataTables.fixedColumns.min.js"> </script> <script type="text/javascript"> $(document).ready(function() { var table = $('#example').DataTable( { scrollY: "500px", scrollX: true, scrollCollapse: true, paging: false, info: false, oLanguage : { "sSearch": "搜索:", }, fixedColumns: { leftColumns: 2, } } ); } ); </script>
在DataTable中显示的信息默认为英文,汉化方法java
$(document).ready(function() { $('#listtable').dataTable({ "sPaginationType" : "full_numbers", "oLanguage" : { "sLengthMenu": "每页显示 _MENU_ 条记录", "sZeroRecords": "抱歉, 没有找到", "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据", "sInfoEmpty": "没有数据", "sInfoFiltered": "(从 _MAX_ 条数据中检索)", "sZeroRecords": "没有检索到数据", "sSearch": "名称:", "oPaginate": { "sFirst": "首页", "sPrevious": "前一页", "sNext": "后一页", "sLast": "尾页" } } } ); });