I'm using of DataTables for show information in a table and I've enabled server-side load (I need that just for load data and pagination) and I don't need to search or sort by server side and I need default search and sorting (jQuery) for my table.
How can I do that ?
var table2 = $('#datatable-buttons2').DataTable({
"serverSide": true,
"processing": true,
"asSorting": ['desc', 'asc'],
"ajax": {
'type': 'POST',
'url': 'test.php?nowsearch=1',
'data': {
inputaz: $("#inputaz").val(),
inputta: $("#inputta").val(),
inputkey: $("#inputkey").val()
}
},
"columns": [{
"data": "group_name"
}, {
"data": "sender"
}, {
"data": "date"
}],
});
Maybe you can do this, customizing data retrieved in Javascript, but this is not useful.
If you sort your items in clientside with serverSide: true, it will be sorted the current retrieved data only, not based in all dataset in your database (if you actually limit results, if you don't, then use directly serverSide: false witch will retrieve all records).
For example, if you have 1000 records, you only get the data of first 10 of then only, not all (10/25/50/100). If you sort locally by age, it will sorted the retrieved 10. Then, if you go to the next page, you will notice the 2nd page is not sequential from the 1st page.
That's why you must to code your sorting/search in your back-end language when you use serverSide: true: in there you will sort first and then you return 10 records sorted.
That's the idea for this option.
Anyway... You can have pagination for client-side (serverSide: false) too by using paging option. But you need to be aware about performance.
In short, if you will handle many records, you should keep using server-side and code the sorting/search/pagination/etc from your back-end an return corresponding data. Is not so hard. You can play with parameters sent to achieve this.
I need to generate a jqGrid structure that similar to Grouped Header Row Config example in trirand JqGrid 4.6 demo website.
In this i have a separate ajax call to get data and the ajax calls a ASP MVC action method.
$.ajax({
url:'Controller/Action/ClientId?='+ id,
method:'get',
success:function(data){
var gridData = data;
jQuery("#list483").jqGrid({
datatype: "local",
height: 'auto',
rowNum: 30,
rowList: [10,20,30],
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date", formatter:"date"},
{name:'name',index:'name', width:100, editable:true},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float", formatter:"number", editable:true},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float", editable:true},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:false}
],
gridComplete:function(){
var dataArray = $('#list483').jqGrid('getGridParam', 'data');
//do some processing here
},
pager: "#plist483",
viewrecords: true,
sortname: 'name',
grouping:true,
groupingView : {
groupField : ['name'],
groupColumnShow : [false],
groupText : ['<b>{0} - {1} Item(s)</b>']
},
caption: "Configure group header row"
});
//load data to grid here
for(var n=0;n<gridData .length;n++){
jQuery("#list483").jqGrid('addRowData', n + 1, gridData [n]);
}
}
})
assume the data that comes from ajax is same as the array in demo website as paste down here:
[
{id:"1",invdate:"2010-05-24",name:"test",note:"note",tax:"10.00",total:"2111.00"} ,
{id:"2",invdate:"2010-05-25",name:"test2",note:"note2",tax:"20.00",total:"320.00"},
{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",tax:"30.00",total:"430.00"},
{id:"4",invdate:"2007-10-04",name:"test",note:"note",tax:"10.00",total:"210.00"},
{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",tax:"20.00",total:"320.00"},
{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",tax:"30.00",total:"430.00"},
{id:"7",invdate:"2007-10-04",name:"test",note:"note",tax:"10.00",total:"210.00"},
{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"21.00",total:"320.00"},
{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"11",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"12",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"13",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"14",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"15",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"16",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"17",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"18",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"19",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"21",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"22",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"23",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"24",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"25",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"26",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"27",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"28",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"29",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
]
Assume the above data array has 1000 objects. so i need server side paging. But how do i add server side paging to this external ajax call?
Once add server side paging the following must work:
Client side sorting must work
RowList must work
thanks
The main problem: you posted some dummy code, which probably has no relation to your real code. It’s better to t the code, which more close to your real code and just to replace the data to any dummy data in the same format.
The most problem: you use datatype: "local", but write about the requirement to implement server side paging. It’s not consequent. Moreover, you fill the grid using addRowData called in the loop. It’s the worst and the slowest way, which I know. If you use datatype: "local", then you should use data: gridData to fill the data. In the way you create the grid with the data. jqGrid will sort the input data first by groupingView.groupField, then by sortname and to display the first page of the resulting data in the grid.
I'd recommend you additionally to use gridview: true and autoencode: true in all your grids to have better performance and to display the data correctly if you load pure data, which contains no HTML fragments. You recommend to remove unneeded index properties from colModel.
I recommend you to post demos in JSFiddle, which will simplify analyzing of your problems and preparing the fix of there. You can use Echo service of JSFiddle additionally(see here). I created the demo https://jsfiddle.net/OlegKi/mkgtuuzy/ for you, which uses almost your code and the following options additionally
sortname: 'id',
gridview: true,
autoencode: true,
I would recommend you additionally, don't use retro version 4.6. Instead of that you can use free jqGrid 4.13.4. It's the fork, which I develop since the end of 2014, after renaming the main jqGrid fork to Guriddo jqGrid JS (see the post), changing the license agreement and making it commercial (see the prices here). Free jqGrid 4.13.4 is full compatible with the old 4.6, but it contains a lot of fixes, performance improvements and many new features described in README to every published version and the wiki. I recommend you to read the article and the wiki articles this one and this one too, which described some small, but important improvements, which you can use in free jqGrid additionally.
The demo https://jsfiddle.net/OlegKi/mkgtuuzy/1/ uses the same code as the previous page, but includes CSS of Font Awesome 4.7, free jqGrid 4.13.4 and the option iconSet: "fontAwesome".
About the requirement of server side paging you should good understand that 1000 rows of data is a small dataset for jqGrid if you fill the data correctly. The demo demonstrates the performance of free jqGrid with 5000 rows, 13 columns and 25 rows per page. You can see the performance of local paging, sorting and filtering the data. If you would load compressed (gziped) JSON data loading from the server and add loadonce: true (and forceClientSorting: true in free jqGrid) then you can easy load all the data using datatype: "json" directly from the url. You should have very good total performance.
I am making a jqgrid using datatype local - a json array returned from the server.
jQuery("#my_table").jqGrid(
{ datatype: "local",
colNames: ['ID', 'Name','Status', 'Date'],
colModel:[ {name:'id',index:'id', width:50, sorttype:"int"},
{name:'name',index:'name', sorttype:"string"},
{name:'status',index:'status', width:50, sorttype:"string"},
{name:'date',index:'date', width:120, align:"left",sorttype:"date"} ],
data: result,
...});
However, one of the columns - status - is represented as numbers.
I would like to display this data as the respective strings. For example 'Active' for status = 1 and 'Inactive' for status = 0.
Is it possible to do this directly in jqgrid, for example as additional colModel parameter or jqgrid method?
I have read through the documentation of jqgrid and failed to notice way of addressing this problem.
I don't want to change the data returned from the server, as I don't see any point in passing redundant information.
I would also prefer if I don't have to manipulate the result array in javascript directly as I don't see point in traversing the array 2 times (once to change the status and the second for jqgrid loading).
You can use formatter: "select":
{name:'status',index:'status', width:50,
formatter:'select', editoptions: {value:'0:Inactive;1:Active'}}
Somewhere in js code:
var status_lines = ['Inactive', 'Active'];
function status_formatter(cellvalue, options, rowObject) {
return status_lines[cellvalue];
}
Then in colModel:
{name:'status',index:'status', width:50, sorttype:"string", formatter:status_formatter}
And of course, you can just do this in formatter:function(c,o,r){...} style if you prefer that.