共享5个微信小程序_jquery dataTable 后台加载数据并

日期:2021-01-12 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

jquery dataTable 后台加载数据并分页实例代码       本篇文章主要介绍了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" 
 thead 
 th label 
 input type="checkbox" / 
 span /span 
 /label 
 /th 
 th 名称 /th 
 th apiKey /th 
 th secretKey /th 
 th i /i 创建时间 /th 
 th 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刷新纪录的时候不会将个性化设定回复为初始化状态 
 "bScrollColla凡科抠图e" : 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",//获取列数据,跟服务器返回字段一致 
 "sClass" : "center",//显示样式 
 "mRender" : function(data, type, full) {//返回自定义的样式 
 return " label input type='checkbox' / span /span /label " 
 "mDataProp" : "appName" 
 "mDataProp" : "apiKey" 
 "mDataProp" : "secretKey" 
 "mDataProp" : "createTime", 
 "mRender" : function(data, type, full) { 
 return new Date(data)//处理时间显示 
 .toLocaleString(); 
 "mDataProp" : "createTime", 
 "mRender" : function(data, type, full) { 
 return " span Sold /span " 
 "mDataProp" : "createTime", 
 "mRender" : function(data, type, full) { 
 return " div a href='#' i /i /a a href='#' i /i /a a href='#' i /i /a /div " 
 } ], 
 "aoColumnDefs" : [ {//用来设置列一些特殊列的属性 
 "bSortable" : false, 
 "aTargets" : [ 0 ] 
 //第一列不排序 
 }, { 
 "bSortable" : false, 
 "aTargets" : [ 5 ] 
 }, { 
 "bSortable" : false, 
 "aTargets" : [ 6 ] 
 } ], 
 "oLanguage" : {//语言设置 
 "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" : ": 以降序排列此列" 
 }); 
 //全选 
 $('table th input:checkbox').on( 
 'click', 
 function() { 
 var that = this; 
 $(this).closest('table').find( 
 'tr td:first-child input:checkbox').each( 
 function() { 
 this.checked = that.checked; 
 $(this).closest('tr').toggleClass('selected'); 
 }); 
 }); 
 }); 
 /script 

后台代码:

 // 获取前端过来的参数,下面三个参数是 dataTable默认的,不要随便更改 
 Integer sEcho = Integer.valueOf(params.get("sEcho"));// 记录操作的次数 每次加1 
 Integer iDisplayStart = Integer.valueOf(params.get("iDisplayStart"));// 起始 
 Integer iDisplayLength = Integer.valueOf(params.get("iDisplayLength"));// 每页显示的size 
 Map String, Object map = new HashMap String, Object 
 try { 
 // 查询数据,分页的话我这边使用的是 PageHelper,这边不介绍了 
 PagedResult PushEntity list = pushEntityService.findByUserId( 
 pushUser.getId(), iDisplayStart, iDisplayLength); 
 // 为操作次数加1,必须这样做 
 int initEcho = sEcho + 1; 

map.put("iTotalRecords", list.getTotal());//数据总条数 map.put("iTotalDisplayRecords", list.getTotal());//显示的条数 map.put("aData", list.getDataList());//数据集合 } catch (Exception e) { e.printStackTrace(); return map;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。