站长网_站长主页_站长之家_易采站长站

会员投稿 投稿指南 站长资讯通告: jquery dataTable 后台加载数据并分页实例代码
搜索:
您的位置: 主页 > 教程 > 前端设计 > jQuery > » 正文

jquery dataTable 后台加载数据并分页实例代码

来源: 易采站长站

使用 dataTable后台加载数据并分页。网上版本很多,但很多都是不能用或者不详细的,这里是已经验证过的。

引用 js文件


<script src="static/ace/js/jquery-2.0.3.min.js"></script>


<script src="static/ace/js/jquery.dataTables.min.js"></script>
<script src="static/ace/js/jquery.dataTables.bootstrap.js"></script>

添加一个table 标签,<tbody></tbody> 可以不用,可以动态加载


<table id="sample-table-2" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th class="center"><label>
<input type="checkbox" class="ace" />
<span class="lbl"></span>
</label>
</th>
<th>名称</th>
<th>apiKey</th>
<th>secretKey</th>
<th><i class="icon-time bigger-110 hidden-480"></i> 创建时间</th>
<th class="hidden-480">Status</th>
<th>操作</th>
</tr>
</thead>

</table>

关键的JS代码:


<script type="text/javascript">
jQuery(function($) {

//初始化table
var oTable1 = $('#sample-table-2')
.dataTable(
{
"bPaginate" : true,//分页工具条显示
//"sPaginationType" : "full_numbers",//分页工具条样式
"bStateSave" : true, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态
"bScrollCollapse" : true, //当显示的数据不足以支撑表格的默认的高度
"bLengthChange" : true, //每页显示的记录数
"bFilter" : false, //搜索栏
"bSort" : true, //是否支持排序功能
"bInfo" : true, //显示表格信息
"bAutoWidth" : true, //自适应宽度
"bJQueryUI" : false,//是否开启主题
"bDestroy" : true,
"bProcessing" : true, //开启读取服务器数据时显示正在加载中……特别是大数据量的时候,开启此功能比较好
"bServerSide" : true,//服务器处理分页,默认是false,需要服务器处理,必须true
"sAjaxDataProp" : "aData",//是服务器分页的标志,必须有
"sAjaxSource" : "${basePath}pushEntity/getTableData",//通过ajax实现分页的url路径。
"aoColumns" : [//初始化要显示的列
{
"mDataProp" : "id",//获取列数据,跟服务器返回字段一致

最新图文资讯
1 2 3 4 5 6
易采站长站 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助 -