Dear All,
I do face a strange behavior on datagrid once I do load the data it won't do the pagination correctly, the default pageSize is set to 10 in markup and if the loaded data more than 10 it shows on datagrid correctly but the pagination not working as well
so i tried to set the pageSize at run time to 20 and loaded the data and revert it back to 10 then the pagination works well
please help me on this
here are the code:
<style scoped="scoped">.tb{width:100%;margin:0;padding:5px 4px;border:1px solid #ccc;box-sizing:border-box}.error-message{margin:4px 0 0 0;padding:0;color:red}</style>
<script type="text/javascript">function err(target,message){var t=$(target);if(t.hasClass('textbox-text')){t=t.parent()}
t.next().next().text(message)}</script>
<div id="p_filter" class="easyui-layout" fit="true">
<div data-options="region:'north',hideCollapsedContent:false,tools:'#p_filter_tools',iconCls:'icon-filter'" title="Filter Tools">
<div class="container-fluid">
<form id="form_search">
<input type="hidden" id="search_category" name="search_category"/>
<div class="row">
<div class="col-md-3">
<input class="easyui-datebox" id="search_from_date" name="search_from_date" label="From Date:*" labelPosition="top" style="width:100%;">
</div>
<div class="col-md-3">
<input class="easyui-datebox" id="search_to_date" name="search_to_date" label="To Date:*" labelPosition="top" style="width:100%;">
</div>
<div class="col-md-3">
<input class="easyui-textbox" id="search_voucher_reference" name="search_voucher_reference" style="width:100%;" data-options="label: 'Voucher Description:',labelPosition: 'top'">
</div>
<div class="col-md-3">
<input class="easyui-combobox" id="search_voucher_type_id" name="search_voucher_type_id[]" style="width:100%" data-options="
data:accounts.voucher,
method:'get',
multiple:true,
valueField:'id',
textField:'text',
panelHeight:'auto',
label: 'Voucher Type:',
labelPosition: 'top'">
</div>
</div>
<div class="row" style="height: auto; padding-bottom:15px;">
<div class="col-md-3">
<input class="easyui-combobox" id="search_agent_id" name="search_agent_id" style="width:100%" data-options="
data:accounts.customer,
method:'get',
valueField:'id',
textField:'text',
panelHeight:'auto',
label: 'Customer Name:',
labelPosition: 'top'">
</div>
</div>
</form>
</div>
<div id="p_filter_tools">
<a href="javascript:void(0)" class="icon-search" onclick="search_voucher()"></a>
<a href="javascript:void(0)" class="icon-clear" onclick="search_clear()"></a>
</div>
</div>
<div data-options="region:'center',border:false" style="width:100%;height: auto">
<table id="dg_vouchers" title="Vouchers List" class="easyui-datagrid" fit="true" data-options="
toolbar:'#vouchers_toolbar',
singleSelect:'true',
autoRowHeight:false,
pagination:true,
pageSize:10">
<thead>
<tr>
<th data-options="field:'fid'" hidden="true"></th>
<th data-options="field:'vid'" hidden="true">voucher ID</th>
<th data-options="field:'vtid'" hidden="true">voucher Type ID</th>
<th data-options="field:'voucher_name'" width="15%">Voucher Type</th>
<th data-options="field:'po_so_id'" width="15%">PO Number</th>
<th data-options="field:'voucher_reference'" width="10%">Voucher Reference</th>
<th data-options="field:'voucher_amount',formatter:formatBalance" width="10%">Voucher Amount</th>
<th data-options="field:'due_amount',formatter:formatBalance" width="10%">Due Amount</th>
<th data-options="field:'voucher_date'" width="10%">Date</th>
<th data-options="field:'inventory_status'" width="15%">Inventory Status</th>
<th data-options="field:'user_full_name'" width="15%">Created By</th>
<th data-options="field:'customer_id'" hidden="true">Customer ID</th>
<th data-options="field:'vendor_id'" hidden="true">Vendor ID</th>
</tr>
</thead>
</table>
<div id="vouchers_toolbar">
<a href="javascript:void(0)" class="easyui-linkbutton" id="btnViewVoucher" iconCls="icon-search" plain="true" onclick="view_voucher()">View Voucher</a>
<a href="javascript:void(0)" class="easyui-linkbutton" id="btnRecord" iconCls="icon-sum" plain="true" onclick="record_payment()">Record Payment</a>
<a href="javascript:void(0)" class="easyui-linkbutton" id="btnLog" iconCls="icon-tip" plain="true" onclick="payment_log()">Payment Logs</a>
<a href="javascript:void(0)" class="easyui-linkbutton" id="btnPDF" iconCls="icon-pdf" plain="true" onclick="get_pdf()">Printable</a>
<?php if($_SESSION['crm_roles']->rv_add): ?>
<?php if($dir=='ltr'): ?>
<span style="float:right">
<a href="javascript:void(0)" class="easyui-menubutton" data-options="menu:'#transactions_menu'">Transactions List</a>
</span>
<?php else: ?>
<span style="float:left">
<a href="javascript:void(0)" class="easyui-menubutton" data-options="menu:'#transactions_menu'">Transactions List</a>
</span>
<?php endif; ?>
<?php endif; ?>
</div>
<div id="transactions_menu" style="width:200px;">
<?php if($_SESSION['crm_roles']->rv_add): ?>
<div onclick="add_payment(2)">Receipt Voucher</div>
<?php endif; ?>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
var c = $('#p_filter');
var p = c.layout('panel','north');
var oldHeight = p.panel('panel').outerHeight();
p.panel('resize', {height:'auto'});
var newHeight = p.panel('panel').outerHeight();
c.layout('resize',{
height: (c.height() + newHeight - oldHeight)
});
});
</script>
<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[i];
var so = orders[i];
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[i] == row){
state.allRows.splice(i,1);
break;
}
}
$(this).datagrid('loadData', state.allRows);
}
});
},
getAllRows: function(jq){
return jq.data('datagrid').allRows;
}
})
})(jQuery);
</script>function unselect_voucher(){
$('#dg_vouchers').datagrid('unselectAll');
$('#btnRecord').linkbutton('disable');
$('#btnLog').linkbutton('disable');
$('#btnPDF').linkbutton('disable');
}
function search_voucher(){
$('#search_category').val('sale');
$('#dg_vouchers').datagrid('loadData',{"total":0,"rows":[]}).datagrid('clientPaging');
$.ajax({
type: "GET",
dataType: "JSON",
url: "<?php echo base_url('pediaerp/auth/get_new_csrf');?>",
success:function(data){
$.ajax({
url : '<?php echo base_url();?>pediaerp/crm/sales/ajax_list_invoice_grid',
type: "POST",
data: $('#form_search').serialize() + '&' + data.csrf_name + '=' + data.csrf_token,
dataType: "JSON",
success: function(data){
$('#dg_vouchers').datagrid('loadData',data).datagrid('clientPaging');
}
});
}
});
unselect_voucher();
}
