easyui的datagrid分页死活不起作用...沙雕了...不说了上代码
1 //关闭tab1打开tab2 查询Detail 2 function refundDetail(){ 3 $('#tt').tabs('select', "Detail Information");//subtitle为选项卡的标题 4 //发起ajax请求,查询退款detail 5 var dayendDate = $("#dayendDate").val(); 6 var terminal = $("#terminal").val(); 7 var counter = $("#counter").val(); 8 9 var txnType = 99; 10 11 $('#detailCollectionInfo').datagrid({ 12 url: "dayendReconController.do?dayendReconDetail", 13 queryParams: { 14 txnType:txnType,//交易类型 15 dayendDate:dayendDate, 16 terminal:terminal, 17 counter:counter 18 } 19 }); 20 21 //下拉框值 22 $("#txnType").val('03');//txnType和点击保持一致,payMode为All不单独设置 23 24 // $.ajax({ 25 // type: "post", 26 // url: "dayendReconController.do?dayendReconDetail", 27 // data: { 28 // dayendDate:dayendDate, 29 // terminal:terminal, 30 // counter:counter 31 // }, 32 // dataType: "json", 33 // success: function(data){ 34 // console.log(data); 35 // var detail = data.detail; 36 // $("#detailCollectionInfo").datagrid("loadData",detail.rows); 37 // } 38 // }) 39 40 }
没错, 注释掉的沙雕代码就是我之前错误的写法, 发起ajax请求后台肯定接收不到page和rows两个参数, 分页必然不起作用.上面的写法datagrid自动将page和rows参数传到了后台, 每点击一次下一页发起当页的数据请求.以下是部分主要代码做个记录:
======================================我是分割线=======================================
jsp:
1 <table id="detailCollectionInfo" title="" class="easyui-datagrid" 2 style="width:100%;height:100%" overflow="hidden" 3 toolbar="#toolbar" pagination="true" rownumbers="true" 4 fitColumns="false" singleSelect="true" fit="true" 5 pagesize="10" pageNumber="1" pageList="[10]" > 6 <thead> 7 <tr> 8 <th align="center" field="id" width="50">ID</th> 9 <th align="center" field="refNo" width="110">Reference Number</th> 10 <th align="center" field="accNo" width="110">Account Number</th> 11 <th align="center" field="txnDate" width="110">Transaction Date</th> 12 <th align="center" field="amount" width="100">Amount(SGD)</th> 13 <th align="center" field="center" width="100">Center</th> 14 <th align="center" field="counter" width="100">Counter</th> 15 <th align="center" field="payMode" width="100">Payment Mode</th> 16 <th align="center" field="txnType" width="110">Transaction Type</th> 17 <th align="center" field="cashierId" width="100">Cashier</th> 18 <th align="center" field="operation" width="100" data-options="field:'_operate',width:80,align:'center',formatter:formatOper">Operation</th> 19 </tr> 20 </thead> 21 </table>