easyui 分页，排序自定义_easyui数据网格自定义分页+排序-CSDN博客

本文链接：https://blog.csdn.net/u010256177/article/details/38983145

<pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>bulletin欢迎页面</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" 	href="../../easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" 	href="../../easyui/themes/icon.css">
<link rel="stylesheet" type="text/css"  href="../../easyui/themes/color.css">
<link rel="stylesheet" type="text/css" href="../../easyui/demo/demo.css">
<script type="text/javascript" src="../../easyui/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../../easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../easyui/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/bulletin.js"></script>
</head>
<body class="easyui-layout">
<div region="center" border="false">
           <table id="table_bulletin_list" class="easyui-datagrid" ></table>
</div>
	<script type="text/javascript">
	var page=1;  //页码
	var rows=10; //页面大小
	var sort="id"; //默认排序的标签
	var order="asc"; //默认排序
	 function getUrl(){
		return window.parent.document.getElementById("content").src;
	 }
	var url =  getUrl(); //获取超链接的地址
	var allNotes; //定义table列标头要显示的数据
	var key=getKeyValue(url,"key");
	var serverPath="http://localhost:8080/oa6/";
	var paramUrl ;
	if(key==0){
		paramUrl =serverPath+"json/bulletin/getJsonData.d";
		allNotes=[[
			          {field:'ck',checkbox:true},
			          {field:'id',title:'主键',width:100,align:'center',hidden:true},
			          {field:'isImp',title:'重要程度',width:200,align:'center',sortable:true},
			          {field:'title',title:'标题',width:200,align:'center'},
			          {field:'dept',title:'发布部门',width:200,align:'center',sortable:true},
			          {field:'date',title:'发布时间',width:200,align:'center',sortable:true},
			          {field:'action',title:'相关操作',width:200,align:'center'}
		          ]];
	}else if(key==1){
		paramUrl =serverPath+"json/bulletin/getJsonData.d";
		allNotes=[[
		          {field:'ck',checkbox:true},
		          {field:'id',title:'主键',width:100,align:'center',hidden:true},
		          {field:'isImp',title:'重要程度',width:200,align:'center',sortable:true},
		          {field:'title',title:'标题',width:200,align:'center'},
		          {field:'dept',title:'发布部门',width:200,align:'center',sortable:true},
		          {field:'date',title:'发布时间',width:200,align:'center',sortable:true},
		          {field:'action',title:'相关操作',width:200,align:'center'}
	          ]];
	}else if(key=="fav"){
		paramUrl =serverPath+"json/bulletin/getJsonData.d";
		allNotes=[[
		          {field:'ck',checkbox:true},
		          {field:'id',title:'主键',width:100,align:'center',hidden:true},
		          {field:'isImp',title:'重要程度',width:200,align:'center',sortable:true},
		          {field:'title',title:'标题',width:200,align:'center'},
		          {field:'dept',title:'发布部门',width:200,align:'center',sortable:true},
		          {field:'date',title:'发布时间',width:200,align:'center',sortable:true},
		          {field:'action',title:'相关操作',width:200,align:'center'}
	          ]];
	}
	  $(function(){
		  var $table_news_list=$("#table_bulletin_list").datagrid({
	            columns:allNotes,
	   			loadMsg:"正在加载..............",
	   			pagination:true,//分页的低端工具框
	   			rownumbers:true,//显示行号
	   			singleSelect:false,//单选
	   			pageNumber:1,
	   			pageSize:10, 
	   			pageList:[10,15,20],
	   			fit:true,
	   		    fitColumns:true,
	   		    checkOnSelect:false,
	   		    multiSort:false, //是否允许多列排序
	   		    remoteSort:true,  //往后台发送排序条件
	   		    onSortColumn:sortColumn, //触发排序事件
	   		    onLoadSuccess:function(){
	   			var p = $("#table_bulletin_list").datagrid('getPager');
	   		    $(p).pagination({
	   			 onSelectPage: function (pageNumber, pageSize) {
	   				 page=pageNumber;
	   				 rows=pageSize;
                     getData();
               }
	   		 });
	   		 }
		});
		  getData();  
	  });
	  //排序函数
	  function sortColumn(sort2,order2){
		  sort=sort2;
		  order=order2;
		  getData( );
	    }; 
	  //查询数据
       function getData() {
			$.post(paramUrl, {
				rows :rows, //传递的参数页面大小
				page : page, //页码
				sort:sort, //排序字码
				order:order //排序的准则
			}, function(msg) {
			 var $table_news_list=$("#table_bulletin_list").datagrid('loadData',msg);
			},'json');
		}
	</script>
</body>
</html>

bulletin.js

 //将url拆分，获取其后面传递的参数
	  function getKeyValue(url,name) {
		  //alert(name);
		  var paraString = url.substring(url.indexOf("?")+1,url.length).split("&");//获取key=多少的值   
		  var data = new Dictionary();
		  for(var i=0;i<paraString.length;i++){
			  data.put(paraString[i].split("=")[0],paraString[i].split("=")[1]);
		   }
		  return data.get(name); //将最终的结果得出
	  }
//=================================
//将数组根据键值获取对应的value值
	  function Dictionary(){
		  this.data = new Array();
		  this.put = function(key,value){
		   this.data[key] = value;
		  };
		  this.get = function(key){
		   return this.data[key];
		  };
		  this.remove = function(key){
		   this.data[key] = null;
		  };
		  this.isEmpty = function(){
		   return this.data.length == 0;
		  };
		  this.size = function(){
		   return this.data.length;
		  };
		 }
	  //---