MVC ajax前臺分頁終於成功記錄一下
學.net MVC jquery easyui ajax 前臺分頁終於解決，後臺返回JSON字串,找不少資料都是前臺模擬資料 ，加上對javascript不熟 ，折騰了幾天！
@{
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>fy</title>
<script type="text/javascript">
$(function () {
document.getElementById('wintest').style.display = 'none';
$("#idkc").textbox({
editable: false,
readonly: true
}
);
$('#dgtest').datagrid({ loadFilter: pagerFilter }).datagrid('loadData', getData());
function getData() {
var rows;
$.ajax({
url: 'Home/js',
async: false,
datatype: 'JSON',
pagination: true,
success: function (data) {
rows = eval("(" + data + ")");
}
});
return rows;
}
function pagerFilter(data){
if (typeof data.length == 'number' && typeof data.splice == 'function'){ // 判斷資料是否是陣列
data = {
total: data.length,
rows: data
}
}
var dg = $(this);
var opts = dg.datagrid('options');
var pager = dg.datagrid('getPager');
pager.pagination({
onSelectPage:function(pageNum, pageSize){
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
pager.pagination('refresh',{
pageNumber:pageNum,
pageSize:pageSize
});
dg.datagrid('loadData',data);
}
});
if (!data.originalRows){
data.originalRows = (data.rows);
}
var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
data.rows = (data.originalRows.slice(start, end));
return data;
}
});
</script>
</head>
<body>
<div>
<table id="dgtest" class="easyui-datagrid" style="width:500px;height:400px"
data-options="singleSelect:true,collapsible:true,pagination:true'">
<thead>
<tr>
<th data-options="field:'Id',width:80">Id</th>
<th data-options="field:'name',width:100">name</th>
</tr>
</thead>
</table>
</div>
</body>
</html>