easyui表格后台分页

左手的ㄟ右手 2021-09-28 12:08 468阅读 0赞

直接上代码

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    		<script src="../../../js/jquery-easyui-1.7.0/jquery.easyui.min.js"></script>
    		<link rel="stylesheet" type="text/css" href="../../../js/jquery-easyui-1.7.0/themes/gray/easyui.css" />
    	</head>
    	<body>
    		
    		<table id="testTable"></table>
    		
    	</body>
    	
    	<script type="text/javascript"> var testData = [ { col1: 1, col2: 2, col3: 3}, { col1: 2, col2: 22, col3: 33} ]; jQuery("#testTable").datagrid({ //singleSelect:true, //method:'post', //remoteSort:false, //fit:true, //fitColumns:true, pagination:true, pageSize:2, pageList:[2,3,4,5,6], //data: dataTest, loader:function(param,success,error){ success({ total: 8, rows: testData }); jQuery(this).datagrid("getPager").pagination("refresh",{ //pageNumber:1, //pageSize:2, total:8 }); }, columns:[ [ { field:'col1',title:'col1',width:100}, { field:'col2',title:'col2',width:100,}, { field:'col3',title:'col3',width:100,sortable:true} ] ] }); </script>
    </html>

![在这里插入图片描述][20190423104305763.png]

### 解释 ###

在点击分页控件的按钮以及初次加载时，都会触发loader方法。这时可以用ajax等方法获取表格数据`testData`与具体的`页数` 。**需要注意的是success函数必须传入`total` 参数，否则会产生一系列的bug。**

[20190423104305763.png]: /images/20210923/b2cf41168b1e4a8dba57dd21b0050a88.png

发表评论取消回复

表情：

评论列表（有 0 条评论，468人围观）

还没有评论，来说两句吧...

相关阅读

相关表格排序+分页

因为无聊封装了一个表格排序加分页的程序结果写完后变的更无聊了........ <style type="text/css"> .tab\{border:\CCCCC

刺骨的言语ヽ痛彻心扉/ 2022年08月24日 04:22/ 0 赞/ 270 阅读

相关 easyUI前端分页与后台分页总结

分页往往是依附于数据表格的，所以我们就使用的是easyui的datagrid组件，来开启pagination分页组件，为了方便，我们使用[js][]实现。

浅浅的花香味﹌/ 2022年06月10日 11:29/ 0 赞/ 295 阅读

相关 easyui-table表格客户端分页实例

一、前言前一篇博客已经介绍了bootstrap-table的客户端分页，而本篇博客将会介绍另一种插件分页—easyui-table； easyui-t

曾经终败给现在/ 2022年06月10日 00:41/ 0 赞/ 227 阅读

相关 EasyUI分页查询

目录目录基于EasyUI分页查询HTML 小黑板基于EasyUI分页查询

刺骨的言语ヽ痛彻心扉/ 2022年05月27日 02:22/ 0 赞/ 265 阅读

相关 easyui datagrid 后台分页+排序

一、jsp页面定义table <div><table id="dg"></table></div> 二、js页面加载table $(function ()

男娘i/ 2022年05月24日 06:11/ 0 赞/ 391 阅读

相关 Easyui datagrid 分页

老规矩还是先上效果图： ![70][] 其实这个分页非常简单，耽误了大半天的时间，还是对easyui 理解的不够透彻，网上有很多关于easyui 的demo 或者列子，看完

谁借莪１个温暖的怀抱￠/ 2022年05月22日 10:28/ 0 赞/ 304 阅读

相关 easyUI 分页前端分页与后端分页

前端分页初始化datagrid时加上Filter $('tabL'+currentCatalogId).datagrid({ loadFilter: pa

心已赠人/ 2022年05月19日 06:07/ 0 赞/ 394 阅读

相关 EasyUI实现表格分页

1.官网下载EasyUI地址：[http://www.jeasyui.com/download/list.php][http_www.jeasyui.com_download_

迷南。/ 2022年05月18日 23:14/ 0 赞/ 329 阅读

相关 easyui表格后台排序

引用 jquery-easyui-1.7.0/themes/gray/easyui.css jquery-easyui-1.7.0/jquery.easyui

亦凉/ 2021年09月28日 14:20/ 0 赞/ 394 阅读

相关 easyui表格后台分页

直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti

左手的ㄟ右手/ 2021年09月28日 12:08/ 0 赞/ 469 阅读