jquery easyUI ajax加载数据分页功能

    xiaoxiao2026-08-05  3

    今天自己搞框架,分享一些封装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 array data = { 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); } }); }

    转载请注明原文地址: https://ju.6miu.com/read-1310869.html
    最新回复(0)