页面在初始化加载数据较多时会非常耗时，如果只加载表格，用户再根据自己的需要通过条件查询数据，就会节约一些时间，提高用户体验，所以在初始化datagrid时想只加载表格不加载数据，做到数据与表格加载分离的效果。
经过实验发现，使用.datagrid（）方法时，参数中只要有URL存在，都会自动调用一次加载数据，可设置url参数为null，则加载表格时就不会向后台发出请求；但是此时如果用户想重置页面条件，重新加载页面时，由于没有请求后台，只加载表格，则会发生页面条件清空，表格数据还在或者表格数据为空分页展示的记录却不为0的现象，所以也需要重置数据和分页参数，具体代码如下：
[javascript] view plain copy
/**
* dataGrid初始化表格
* @param id datagrid的id
* @param column 展示的列名
* @param opt 设置自定义datagrid属性
*/
function commonInitDataGrid(id, column, opt){
var initData =
{
"code":100,
"msg":"",
"data":{"totalDataCount":0,"totalPageCount":0,"list":[],"properties":{"footer": []}}
}
//校验参数
if(isEmpty(id) || isEmpty(column)){
jQuery.messager.alert("系统提示", "系统错误，请联系技术人员！")
return
}
//默认属性
var defaultOpt= {
"url": null,
"method": 'POST', //请求方式
"columns": column,
"width": document.body.clientWidth < 756 ? 756 - 18 : document.body.clientWidth - 18,
"remoteSort": false,
"rownumbers": true,
"pagination": true,
"showFooter": true,
"fitColumns": true,
"pageNumber": 1,
"pageSize": 20,
"pageList": [10, 20, 30, 50, 100],
"singleSelect": true,
"striped": true,
"loadFilter": function (result) {
if (result.code == "100") {
//解析json结果集，返回给datagrid
var obj =
{
"total": result.data.totalDataCount,
"rows": result.data.list,
"footer": result.data.properties.footer
}
return obj
} else {
jQuery.messager.alert("系统提示", result.msg)
return false
}
}
}
if(!isEmpty(opt)){
//替换自定义属性
$.extend(defaultOpt, opt)
}
//把属性与事件放到表格中，进行初始化
$("#" + id).datagrid(defaultOpt)
$("#" + id).datagrid('loadData', initData)
}
说明：1.设置URL为null后，则每次调用此方法都只会加载表格，不加载数据，调用此方法时就不需要再调用此方法之前设置URL了；
2.pageSize的参数不在pageList之中时，页面分页会默认取pageList中的第一个参数，此时pageSize设置无效。
3.loadFilter方法是为了处理后台返回的结果，并自动传给datagrid进行处理然后展示在页面
<!DOCTYPE html><HTML>
<HEAD>
<TITLE>New Document</TITLE>
<style type="text/css">
* {
margin: 0
padding: 0
}
#content {
margin: auto
width: 400px
border: 1px solid black
}
.on {
color: red
}
.off {
color: black
}
body {
font-family: "Courier New"
}
ul {
padding: 10px 0px 10px 45px
}
ul li {
color: red
}
</style>
<script type="text/javascript">
window.onload = function() {
Page.arr = Page.pushArr()
Page.setClickPageNum()
Page.allContent("null")
}
var Page = {
defaultPerPageNum: 4,
arr: null,
removedBlankStr: function(str) {
var regex = /^\s*|\s*$/g
return str.replace(regex, "")
},
setTotalPageNums: function() {
var pp = Number(Page.perPageNum('t1'))
var pnums = Page.arr.length / pp > parseInt(Page.arr.length / pp) ? parseInt(Page.arr.length / pp) + 1 : Page.arr.length / pp
var div = document.getElementById('pagenum')
div.innerHTML = ""
for (var i = 0 i < pnums i++) {
var a = document.createElement('a')
a.href = "#"
a.innerHTML = i + 1
a.setAttribute('class', 'off')
div.appendChild(a)
div.innerHTML += " "
}
Page.setClickPageNum()
},
perPageNum: function(PerPageNum) {
var pv = document.getElementById(PerPageNum).value
pv = Page.removedBlankStr(pv)
if ("" == pv || isNaN(pv) || (new RegExp(/^[-]*[0]+.*?$/g).test(pv)) || pv < 0) {
pv = Page.defaultPerPageNum
document.getElementById(PerPageNum).value = pv
}
document.getElementById('p1').innerHTML = pv
return pv
},
getClickPageNum: function(diva) {
return parseFloat(diva.innerHTML)
},
setClickPageNum: function() {
var divx = document.getElementById('pagenum')
var a = divx.children
var len = a.length
for (var i = 0 i < len i++) {
a[i].onclick = function() {
this.className = "on"
Page.allContent(this)
}
}
},
pushArr: function() {
var arr = new Array()
var ul = document.getElementById('ul1')
var len = ul.children.length
for (var i = 0 i < len i++) {
arr.push(ul.children[i])
}
return arr
},
allContent: function(divb) {
var ul = document.getElementById('ul1')
ul.innerHTML = ""
var pp = parseFloat(this.perPageNum('t1'))
if ("null" == divb) {
divb = document.getElementById('pagenum').children[0]
divb.className = "on"
}
var pg = this.getClickPageNum(divb) // 1 2 3
var ppj = pp * (pg - 1) // 0 4 8
var end = ppj + pp // 4 8 12
var arr = this.arr
var pnums = arr.length / pp > parseInt(arr.length / pp) ? parseInt(arr.length / pp) + 1 : arr.length / pp
for (var i = ppj i < end i++) {
var a = arr[i]
if (null != a) {
ul.appendChild(a)
}
}
},
doAction: function() {
Page.perPageNum('t1')
Page.setTotalPageNums()
Page.allContent("null")
}
}
</script>
</HEAD>
<BODY>
<div id='content'>
<ul id="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
<div id="pagenum"><a href="#" class="on">1</a> <a href="#">2</a> <a href="#">3</a>
</div>
<input type="text" value="4" id="t1" /> 
<input type="button" value="set" onclick="Page.doAction()" />  Each Page
<a id="p1"></a>Records</div>
</BODY>
</HTML>
一般html网页，可以采用div的css属性控制显示和隐藏来实现分页的目的。
display:block这个css属性可以让div显示出来；
display:none这个css属性可以让div隐藏起来；
例如：
<div id="page1" style="display:block">这是第1页的内容</div>
<div id="page2" style="display:none">这是第2页的内容</div>
<div id="page3" style="display:none">这是第3页的内容</div>
然后增加3个按钮，分别是第1页，第2页，第3页，每个按钮有点击事情。
例如：
<a href="javascript:showpage(1)">第1页</a>
<a href="javascript:showpage(2)">第2页</a>
<a href="javascript:showpage(3)">第3页</a>
4
然后通过javascript点击事情来修改div的css属性display的值，就可以达到切换页面的目的了。
例如：
<script>
function showpage(page){
for(var i=1i<=3i++) {
if (page==i){
document.getElementById("page"+page).style.display="block"
} else {
document.getElementById("page"+page).style.display="none"
}
}
}
</script>
