关于bootstrap的前端表格控件databel的使用

• 介绍一款插件无非是从从三个方面来介绍：
• 1. 从引入的js文件以及css文件

1 2 3 4 5 6

<script src="${ctx}plugins/datatables/jquery.dataTables.min.js"></script> <script src="${ctx}plugins/datatables/dataTables.bootstrap.js"></script> <link rel="stylesheet" href="${ctx}static/plugins/bootstrap-table/bootstrap-table.min.css"> <link rel="stylesheet" href="${ctx}static/plugins/bootstrap-table/extensions/fixed-columns/bootstrap-table-fixed-columns.css"> <link rel="stylesheet" href="${ctx}static/plugins/bootstrap-table/extensions/editable3/css/bootstrap-editable.css">

• 使用datatable 的主体样式：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99

var oTable = $('#chargeTbody').DataTable({ "ajax":{ "url":"${ctx}/ReportManager/getChargeItem1", "type":"post", "data":function(d){ var param = {}; param.draw = d.draw; // param.start = d.start; // param.length = d.length; param.physicalNum=physicalNum; return param; } }, "serverSide": true, "paging": false, "lengthChange": true, "searching": false, "ordering": false, "info": false, "autoWidth": true, "pagingType": "full_numbers", "stateSave": false, "destroy":true, "columns": [ { "data": "bmmc00" }, { "data": "sfsf00" }, { "data": "sfcj00" }, { "data": "qj0000" }, { "data": "jcbz00" }, { "data": "kssh00" }, { "data": "sqxmmc"}, { "data": "tpdy00"} ], "columnDefs": [ { "targets": 1,//最后一列 "data": "null",// render: function(data, type, row, meta) { return repalceNum(data); } }, { "targets": 2,//最后一列 "data": "null",// render: function(data, type, row, meta) { return repalceNum(data); } }, { "targets": 3,//最后一列 "data": "null",// render: function(data, type, row, meta) { return repalceNum(data); } }, { "targets": 4,//最后一列 "data": "null",// render: function(data, type, row, meta) { return repalceNum(data); } }, { "targets": 5,//最后一列 "data": "null",// render: function(data, type, row, meta) { return repalceNum(data); } }, { "targets": 7,//最后一列 "data": "null",// render: function(data, type, row, meta) { return repalceNum(data); } }, ], "oLanguage": {//语言设置 "sLengthMenu": "每页显示 _MENU_ 条记录", "sZeroRecords": "没有检索到数据", "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录", "sInfoEmtpy": "没有数据", "sProcessing": '<i class="fa fa-coffee"></i> 正在加载数据...', "oPaginate": { "sFirst": "首页", "sPrevious": "前一页", "sNext": "后一页", "sLast": "尾页" } } });

• 在controller层进行数据交互：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

/** * @Title: getChargeItem * @Description: TODO获取收费项目的controller * @param @param physicalNum * @param @return 参数 * @return ResultMsg 返回类型 * @throws */ @RequestMapping("getChargeItem1") @ResponseBody public Datatables<HashMap<Object, Object>> getChargeItem(String physicalNum, Integer draw) { List<VwHmYwTjyw00> chargeItem = reportManagerService.getChargeItem(physicalNum); PageInfo<HashMap<Object, Object>> pageInfo = new PageInfo(chargeItem); Datatables<HashMap<Object, Object>> data = new Datatables<HashMap<Object, Object>>(); data.setData(pageInfo.getList()); data.setDraw(draw); data.setRecordsTotal(pageInfo.getTotal()); return data; }

• 最后一个问题就是如何调用表格控件加载：

1	oTable.ajax.reload();

• 总结：datatable的前端控件大致也就是这样了，以前都是自己个拼的表格，结果是无法对数据进行有效的封装，包括自己个绑定的事件有很多的问题，哈哈~，没办法只能有别人家的了，样式什么的就不说了，单从各类事件的触发上就已经很棒。