jquery easyUI ajax加载数据分页功能

分享一下我老师大神的人工智能教程吧。零基础,通俗易懂!风趣幽默!http://www.captainbed.net/

也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!

               

今天自己搞框架,分享一些封装ajax请求数据,封装分页代码的一些代码心得。

页面先引入easyUI的基础样式和js文件

<link rel="stylesheet" href="${pubPath}/easyui/themes/icon.css" type="text/css"><link rel="stylesheet" href="${pubPath}/easyui/themes/default/easyui.css" type="text/css"><link rel="stylesheet" href="${pubPath}/easyui/demo/demo.css" type="text/css"><script type="text/javascript" src="${pubPath}/easyui/jquery.min.js"></script><script type="text/javascript" src="${pubPath}/easyui/jquery.easyui.min.js"></script>


路径自己修改

然后定义自己的table

<table id="dataGrid" class="easyui-datagrid" title="文件基本信息"  data-options="rownumbers:true,singleSelect:true,autoRowHeight:true,pagination:true,pageSize:10,fit:false"><thead>            <tr>                <th field="filename" width="200" align="center">文件名</th>                <th field="filesize" width="200" align="center">大小</th>                <th field="filetype" width="200" align="center">类型</th>                <th field="fileperson" width="200" align="center">创建人</th>                <th field="filedate" width="200" align="center">创建时间</th>                <th field="filedown" width="200" align="center">下载次数</th>                <th field="filelabel" width="200" align="center">文件标签</th>                <th field="filepath" width="200" align="center">文件路径</th>            </tr>        </thead></table>


这里页面差不多写完了。开始写js,把全部代码粘上来吧,也不是很多。供大家参考

$(function() {Search();});function pagerFilter(data){debugger;if (typeof data.pageListdata.length == 'number' && typeof data.pageListdata.splice == 'function'){// is arraydata = {total: data.pageListdata.length,rows: data.pageListdata}}var dg = $('#dataGrid');var opts = dg.datagrid('options');var pager = $('#dataGrid').datagrid('getPager');$(pager).pagination({onSelectPage:function(pageNum, pageSize){opts.pageNumber = pageNum;opts.pageSize = pageSize;pager.pagination('refresh',{pageNumber:pageNum,pageSize:pageSize});$('#dataGrid').datagrid('loadData',data);},beforePageText : '第', //页数文本框前显示的汉字           afterPageText : '页    共 {pages} 页',displayMsg : '当前显示 {from} - {to} 条记录   共 {total} 条记录'});if (!data.pageListdata){data.pageListdata = (data.rows);}var start = (opts.pageNumber-1)*parseInt(opts.pageSize);var end = start + parseInt(opts.pageSize);data.rows = (data.pageListdata.slice(start, end));return data; }function Search() {//pageNumber为datagrid的当前页码var page_Number = $('#dataGrid').datagrid('options').pageNumber;//pageSize为datagrid的每页记录条数var page_Size = $('#dataGrid').datagrid('options').pageSize;var path = $("#fromGrid").attr("action");$.ajax({url : path,type : "post",data : {pageNumber : page_Number,pageSize : page_Size},dataType : "json",success : function(datas) {$('#dataGrid').datagrid({loadFilter:pagerFilter}).datagrid('loadData',datas);}});}


           

给我老师的人工智能教程打call!http://www.captainbed.net/

这里写图片描述

猜你喜欢

转载自blog.csdn.net/qq_43717814/article/details/84293394
今日推荐