【学习】关于datatable组件的使用(一)

关于datatable组件的使用(一)

今天项目中一个数据展示，数据量不大，需要分页，模糊查询，排序等功能。正好想到了datatables这个组件,效果还不错做个记录。

1.首先必须要的样式和js

<!-- Bootstrap Core CSS --><link rel="stylesheet" type="text/css" href="${ctx}/common/js/bootstrap/dist/css/bootstrap.min.css" /><!--datatables--><link rel="stylesheet" type="text/css"    href="${ctx}/common/js/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" />

<!-- jQuery --><script src="${ctx}/common/js/jquery2/dist/jquery.min.js"></script><span style="font-size:32px;"><span style="font-size:14px;"></span></span><pre name="code" class="html"><!--datatables--><script src="${ctx}/common/js/datatables/media/js/jquery.dataTables.min.js"></script><script type="text/javascript" language="javascript" src="${ctx}/common/js/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.js"></script>

2.html

简单的表格注意table中的class属性

<table class="table table-striped table-bordered table-hover" id="dataTables-example"><thead><tr><th>问卷名</th><th>发布人</th><th>创建时间</th><th>到期时间</th><th>审核/发布时间</th><th>发布状态</th><th>操作</th></tr></thead><tbody><tr class="odd gradeX"><td>111</td><td>2222</td><td class="center">3333</td><td class="center">4</td><td>time</td><td> kankan</td><td> kankan</td></tr></tbody></table>

3.加载运行插件方法和导入支持中文的文件

<script>$(document).ready(function() {$('#dataTables-example').DataTable({"oLanguage": {                "sUrl": "${ctx}/pages/Onlinesurvy/fabu/dataTables.bootstrap_zh_CN.json"            },responsive : false});});$(function() {$('#myModal').on('hide.bs.modal', function() {})});</script>

这个插件支持后台交互，只是这次需求不用做这么复杂，可以在官网上了解到更多的功能。附件：（不会上传-，-  就是一些样式js等官网都有）