JQUERY AJAX DATAGRID后台分页前台源码

最新推荐文章于 2018-12-08 14:56:45 发布

sadleaflzh

最新推荐文章于 2018-12-08 14:56:45 发布

阅读量254

点赞数

本文链接：https://blog.youkuaiyun.com/sadleaflzh/article/details/82769135

版权

查了不少资料，终于完成了自己的记录一下

@{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<link href="~/Scripts/jqq/themes/icon.css" rel="stylesheet" />
<link href="~/Scripts/jqq/themes/default/easyui.css" rel="stylesheet" />
<link href="../../Scripts/jqq/demo/demo.css" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/jqq/jquery.min.js"></script>
<script type="text/javascript" src="~/Scripts/jqq/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="~/Scripts/jqq/jquery.easyui.min.js"></script>
<title>datatablebind</title>
<script type="text/javascript">
function dt(size,page)
{
var ret

$.ajax({
url: 'Home/jsfy',
dataType: 'json ',
async: false,
loadMsg: 'Loading.....',
data: { "size": size, "page": page },
success: function (data) {
ret = data;
}
});
return ret;

};
function dtd(size, page) {
var ret

$.ajax({
url: 'Home/jsfyd',
dataType: 'json ',
async: false,
loadMsg: 'Loading.....',
data: { "size": size, "page": page },
success: function (data) {
ret = data;
}
});
return ret;

};
function init() {
var cnt;
var oneinit = dt(10, 1);
$.each(oneinit.total, function (k, v) {
cnt = v.alltt;
});

$.each(oneinit.rows, function (k, v) {

var tr = "<tr><td>" + v.KQRID + "</td><td>" + v.KQREMPID + "</td></tr>"
$("#dgtest").append(tr);

});
initdg();
return cnt;

}

function initdg() {
$("#dgtest").datagrid({
title: 'TEST fy ok',
border: true,
rownumbers: true,
striped: true,
loadMsg: true,
columns: [[{ field: 'KQRID', title: 'kqrid', width: 100 },
{ field: 'KQREMPID', title: 'kqrempid', width: 100 }
]]
});
}

$(function () {

var test = init();

$("#box").pagination({
total: test,
pageSize: 10,
pageNumber: 1,
pageList: [5, 10, 15, 20],
showPageInfo: false,
showRefresh: false,

//loading:true,
onSelectPage: function (pageNumber, pageSize) {
var data = dtd(pageSize, pageNumber);
//$("#dgtest tr:first").nextAll().remove();
$("#dgtest").empty();
$.each(data.rows, function (k, v) {

var tr = "<tr><td>" + v.KQRID + "</td><td>" + v.KQREMPID + "</td></tr>"
$("#dgtest").append(tr);

});
initdg();
}
});
})
</script>
</head>
<body>
<div>

<table id="dgtest" style="border:1px; width:600px;height:400px">


</table>
<div id="box" style="border:1px solid blue; width:600px"></div>
</div>
</body>
</html>