Title: [Solved]datagrid clientpagination doesn't work with columnMoving Post by: seldx on July 21, 2018, 12:27:31 AM clientpagination and columnMoving can run well separately.
but as the code showed below,when I try to add columnMoving feature to paging like this:"$('#dg').datagrid({data:getData()}).datagrid('clientPaging').datagrid('columnMoving')", Neither of them works. If I drag column first , then pagination doesn't work anymore; If I skip first,then column dragging would cause empty datagrid. Here is the complete code: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Client Side Pagination in DataGrid - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <link rel="stylesheet" type="text/css" href="../demo.css"> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script> <script type="text/javascript" src="columns-ext.js"></script> </head> <body> <h2>Client Side Pagination in DataGrid</h2> <p>This sample shows how to implement client side pagination in DataGrid.</p> <div style="margin:20px 0;"></div> <table id="dg" title="Client Side Pagination" style="width:700px;height:600px" data-options=" rownumbers:true, singleSelect:true, autoRowHeight:false, pagination:true, pageSize:30"> <thead> <tr> <th field="inv" width="80">Inv No</th> <th field="date" width="100">Date</th> <th field="name" width="80">Name</th> <th field="amount" width="80" align="right">Amount</th> <th field="price" width="80" align="right">Price</th> <th field="cost" width="100" align="right">Cost</th> <th field="note" width="110">Note</th> </tr> </thead> </table> <script> (function($){ function pagerFilter(data){ if ($.isArray(data)){ // is array data = { total: data.length, rows: data } } var target = this; var dg = $(target); var state = dg.data('datagrid'); var opts = dg.datagrid('options'); if (!state.allRows){ state.allRows = (data.rows); } if (!opts.remoteSort && opts.sortName){ var names = opts.sortName.split(','); var orders = opts.sortOrder.split(','); state.allRows.sort(function(r1,r2){ var r = 0; for(var i=0; i<names.length; i++){ var sn = names; var so = orders; var col = $(target).datagrid('getColumnOption', sn); var sortFunc = col.sorter || function(a,b){ return a==b ? 0 : (a>b?1:-1); }; r = sortFunc(r1[sn], r2[sn]) * (so=='asc'?1:-1); if (r != 0){ return r; } } return r; }); } var start = (opts.pageNumber-1)*parseInt(opts.pageSize); var end = start + parseInt(opts.pageSize); data.rows = state.allRows.slice(start, end); return data; } var loadDataMethod = $.fn.datagrid.methods.loadData; var deleteRowMethod = $.fn.datagrid.methods.deleteRow; $.extend($.fn.datagrid.methods, { clientPaging: function(jq){ return jq.each(function(){ var dg = $(this); var state = dg.data('datagrid'); var opts = state.options; opts.loadFilter = pagerFilter; var onBeforeLoad = opts.onBeforeLoad; opts.onBeforeLoad = function(param){ state.allRows = null; return onBeforeLoad.call(this, param); } 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',state.allRows); } }); $(this).datagrid('loadData', state.data); if (opts.url){ $(this).datagrid('reload'); } }); }, loadData: function(jq, data){ jq.each(function(){ $(this).data('datagrid').allRows = null; }); return loadDataMethod.call($.fn.datagrid.methods, jq, data); }, deleteRow: function(jq, index){ return jq.each(function(){ var row = $(this).datagrid('getRows')[index]; deleteRowMethod.call($.fn.datagrid.methods, $(this), index); var state = $(this).data('datagrid'); if (state.options.loadFilter == pagerFilter){ for(var i=0; i<state.allRows.length; i++){ if (state.allRows == row){ state.allRows.splice(i,1); break; } } $(this).datagrid('loadData', state.allRows); } }); }, getAllRows: function(jq){ return jq.data('datagrid').allRows; } }) })(jQuery); function getData(){ var rows = []; for(var i=1; i<=500; i++){ var amount = Math.floor(Math.random()*1000); var price = Math.floor(Math.random()*1000); rows.push({ inv: 'Inv No '+i, date: $.fn.datebox.defaults.formatter(new Date()), name: 'Name '+i, amount: amount, price: price, cost: amount*price, note: 'Note '+i }); } return rows; } $(function(){ $('#dg').datagrid({data:getData()}).datagrid('clientPaging').datagrid('columnMoving'); }); </script> </body> </html> Title: Re: datagrid clientpagination doesn't work with columnMoving Post by: jarry on July 21, 2018, 08:12:14 AM Please look at this example http://code.reloado.com/ifirof/edit#preview. It works fine.
Title: Re: datagrid clientpagination doesn't work with columnMoving Post by: seldx on July 22, 2018, 06:30:14 PM yes!,thanks jarry.It works. loving you :-*
the code I missed is onDropColumn: function(){ $(this).datagrid('clientPaging') $(this).datagrid('loadData', data); } |