Develop Reference

jquery Datatable manipulation causing the entire page to reload

I have a jQuery datatable that is initially populated using ajax call, and when i click anywhere on the table like pagination number or display length dropdown list, the whole page is reloaded indefinetely. Here is how i populate the datatable.
let table = $('#data-table').DataTable();
function populateTable(){
table = $('#data-table').DataTable({
destroy: true,
responsive: true,
serverSide: false,
autoWidth: false,
paging: true,
filter: true,
searching: true,
stateSave: true,
scrollX: true,
lengthMenu: [10, 25, 50, 75, 100],
language: {
"search": "Filtrer: "
},
ajax: {
url: '/Observer/GetActiveClientsByFloor',
type: 'POST',
data: {
FloorId: floorId,
Type: type
},
dataSrc: ''
},
columns: [
{
title: 'Zone',
data: 'LastKnownZone',
},
{
title: 'Hiérarchie Map',
data: 'MapInfo.mapHierarchyString',
},
{
title: 'Addresse MAC',
data: 'macAddress',
},
{
title: 'SSID',
data: 'ssId',
},
],
createdRow: (row, data, dataIndex, cells) => {
const selectedRowProfileId = $('#selectedRowProfileId', window.parent.document).val();
if (selectedRowProfileId !== '') {
if (data['ProfileId'] === selectedRowProfileId) {
$(row).addClass('selectedCustom');
}
}
},
initComplete: function (settings, json)
{
const response = json;
//Show the respone on other part of the page
}
}).order([[1, 'asc']]).draw(false);
}
I would like to know what could be causing page re-load and also know how to make pagination works.

You don't need to call order([[1, 'asc']]).draw(false) after table initialization, just add
order: [[1, 'asc']]
to your table properties, like this
$(document).ready(function(){
let table = $('#data-table').DataTable({
order: [[1, 'asc']],
//Other properties
});
As you are not using server-side DataTables will make pagination automatically when you click pagination buttons, considering that all data has already been loaded in the first Ajax call, but when serverSide is set to true every time you change the pagination a new Ajax call will be made by datatables sending aditional parameters for pagination, ordering etc and you will need to change you backend query, filters and pagination logic based on that params.
Edit:
Also destroy: true is not needed in your case, as Documentation says:
"Destroy any existing table matching the selector and replace with the new options."
You are not re-creating or replacing your table, so you can just remove it

jqgrid auto sorting the data on grouped column, how can this be turned off?

I have a jqgrid with grouping, however the data coming back from the server is already grouped, I simply want to apply the jqgrid grouping look to the data. I've included a jsfiddle since a picture speaks 1000 words. THE DATA IS INCLUDED IN THE FIDDLE...
Link to fiddle : http://jsfiddle.net/Rab815/p8Zsk/
$('table').jqGrid({
data: data,
datatype: "local",
rowNum:100,
gridview: true,
deepempty: true,
hoverrows: false,
headertitles: true,
height:'600px',
viewrecords:true,
hoverrows: true,
sortable: true,
altRows: true,
colModel: [
{ label: "Group Name", name:'groupName', field:"groupName", sortable:false},
{ label: 'Name', field: 'name', name:'name' },
{
label: 'Date Modified', field: 'lastGenerated', name:'lastGenerated'
}
],
grouping:true,
groupingView:
{
groupField: ['groupName'],
groupColumnShow: [true],
groupCollapse: true,
},
shrinkToFit: false
});
However I need it displayed in this order
Now, if you put the data in an editor so each block appears on one line, the data is already coming back grouped from the DB in the order I want it to appear. but the grid is sorting the groupName data field in 'asc' order and far as I can tell it can't be turned off.
The Grouping Column would eventually be set to groupColumnShow: [false]
ANSWER from Olegs FIDDLE...
Included a
groupOrder
in the data coming from the server rather than doing the mapping.
Altered ColModel for GroupName as follows
{
label: "Group Name", field: "groupName",
sorttype: function (cellValue, obj) {
return obj.groupOrder;
//return groupOrder[obj.groupId];
}
Now everything appears in the correct order. This solution allows the sort, which defaults to "asc" in jqgrid to order the grouped data by a different value other than the grouped data itself.
Thanks! This had me stumped for quite a while!

The problem exist because you use datatype: "local" with the data loaded from the server.
To solve your problem you can define sorttype property as function in the column "groupName" by which you sort. The function should return the value which can be used instead of the column value. For example you can extend the items of the data with new field groupOrder for example and use
sorttype: function (cellValue, obj) {
return groupOrder[obj.groupId];
}
The field should be filled on the server.
Alternatively you can fill the map between groupId in your current data model and the index to the group order. For example the code
var groupOrder = {}, i, l = data.length, groupId, groupIndex = 1;
for (i = 0; i < l; i++) {
groupId = data[i].groupId;
if (groupOrder[groupId] === undefined) {
groupOrder[groupId] = groupIndex++;
}
}
fills groupOrder in the same order in which you have the groups (you can use data[i].groupName instead of data[i].groupId in the same way). Having such groupOrder you can use
sorttype: function (cellValue, obj) {
return groupOrder[obj.groupId];
}
The demo http://jsfiddle.net/p8Zsk/38/ use the approach and it displays the groups in correct order.

Want to create JQgrid with inline add,edit,save without any buttons [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
Below is my requirement:
Initially JQgrid should be Empty
On click of Jqgrid an new row has to be added with auto ID
On lost focus of row data should be saved to DB
On click of row user should be able to edit it and on lost focus data should be saved to DB
var lastsel;
jQuery("#list").jqGrid({
url: "/TransactionType/GetGridData/",
datatype: 'json',
mtype: 'GET',
height: "300",
colNames: ['Customer ID', 'Contact Name', 'Address', 'City', 'Postal Code'],
colModel: [
{ name: 'CustomerID', index: 'CustomerID', width: 100, align: 'left' },
{ name: 'ContactName', index: 'ContactName', width: 150, align: 'left', editable: true },
{ name: 'Address', index: 'Address', width: 300, align: 'left', editable: true },
{ name: 'City', index: 'City', width: 150, align: 'left', editable: true },
{ name: 'PostalCode', index: 'PostalCode', width: 100, align: 'left', editable: true }
],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [1, 3, 5, 10, 20, 30, 40, 50],
recordpos: 'right',
viewrecords: true,
sortorder: "desc",
sortname: "CustomerID",
sorttype: "integer",
multiselect: false,
caption: "Manipulating JSON Data",
emptyrecords: "No records found.",
loadtext: "Loading...",
loadonce: true,
pgtext: "Page {0} of {1}",
jsonReader: {
repeatitems: true,
cell: "cell"
},
onSelectRow: function (id) {
if (id) {
if (id !== lastsel) {
jQuery('#list').jqGrid('restoreRow', lastsel);
jQuery('#list').jqGrid('editRow', id, true);
lastsel = id;
} else {
jQuery('#list').jqGrid('restoreRow', lastsel);
lastsel = "";
debugger;
var rows = jQuery("#list").jqGrid('getRowData');
var paras = new Array();
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
paras.push($.param(row));
}
var rids = $('#list').jqGrid('getDataIDs');
var n = rids.length;
var nth_row_id = rids[n - 1];
jQuery("#list").addRow(n + 1, parameters = {
edit: true,
editicon: "ui-icon-pencil",
add: true,
addicon: "ui-icon-plus",
save: true,
saveicon: "ui-icon-disk",
cancel: true,
cancelicon: "ui-icon-cancel",
addParams: { useFormatter: false },
editParams: {}
});
}
}
},
editurl: "/TransactionType/GetTotalCount",
});
This is my Jqgrid where i'm able to add the row but not with auto generated id and I'm not able to call the controller method after lost focus of row or Enter key.

jqGrid includes inlineNav method which allows to add to the navigator bar (created by navGrid called typically with add: false, edit: false option, see the answer) Add, Edit, Save and Cancel buttons. If the user click on one from the button the corresponding inline editing method will be called. One can use editParams and addParams.addRowParams to specify any additional options of inline editing methods (see here for example).
You current code use addRow directly. The second option (parameters =) contains wrong syntax. If you would need to generate unique id I would recommend you to use $.jgrid.randId() instead of usage n + 1. The first, and the only, parameter of addRow is object with options. If you use adRow directly you can use rowID option to specify the id of new added row. If no rowID option is specified jqGrid uses $.jgrid.randId() automatically to generate unique rowid of new row.
The ids of all inline editing buttons are set based on the id of the grid and a suffix: "_iladd", "_iledit", "_ilsave", "_ilcancel". For example is the grid have id="list" then the id of Save button will be "list_ilsave". If required you can disable any button by addressing it by its id (for example $("#list_ilsave").removeClass('ui-state-disabled'); - enable Save button and $("#list_ilsave").addClass('ui-state-disabled'); - disable it). In the same way you can use jQuery.click to simulate click on any button. For example $("#list_ilsave").click(); will simulate clicking on the Save button.
If the user clicks on Add button the new row (<tr>) will get additional class "jqgrid-new-row". You can use the fact to find rows added by addRow.
You can use editoptions.dataEvents to register blur or focusout. The answer and the answer could provide some code fragmants which could help you.
It could be important to refresh the ids of the grid with the values generated in DB after successful saving. There are many ways to implement this. One of the most easy way would be to reload the grid after successful saving the row. See the code from the answer. Another way will be to return the new id from the web method specified by editurl ("/TransactionType/GetTotalCount" in your code). Using aftersavefunc callback you can get the response of editurl and makes modification of the id of in the grid. See relatively long code of aftersavefunc in the answer as an example.

How can I make a jqgrid with a subgrid load faster?

This is an example of the code I have. I left out the colNames and colModel because I know that's not the problem. I'm just wondering if there is any way to make a jqgrid that has a subgrid load faster. When this grid has > 100 records, it is fairly slow. If I remove the subgrid code and put gridview: true on the grid, it loads sooooooooooooooo much faster, but obviously, I can't have gridview: true and a subgrid. Any suggestions?
$(scheduleGridName).jqGrid({
url: dataURL,
datatype: "json",
mtype: 'GET',
colNames: [...],
colModel: [...],
height: "auto",
width: '100%',
rowNum: 2000,
loadonce: true,
jsonReader: {
root: "SearchResults",
records: "NumberOfResults",
repeatitems: false
},
viewrecords: true,
subGrid: true,
subGridRowExpanded: getSubgrid
});

You have rowNum: 2000. So that is a lot of records plus a subGrid for each one. Try setting rowNum: 10. or a number that you find that loads fast enough. If that does not work then consider a different way to show the subgrid. You could create an "action" column that has a link to another grid to dig into the details.
This code example will add the html to the "Action" column.
gridComplete: function () {
var ids = jQuery("#grid").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var cl = ids[i];
be = "<a href='../Company/EditUser?contactID=" + cl + "'>Edit</a></xsl:text>";
jQuery("#grid").jqGrid('setRowData', ids[i], {
Action: be
});
}
}
});

Jqgrid pager not working with "local" dataType

Does Jqgrid allow us to add pager which we are using dataType local and don't want the whole data to be loaded at once. I am trying to do the same without success. It only shows the first page and show Page 1 Of 1 on the pager when there are many more records to be displayed.

Probably you fill the grid contain in the wrong way. Look at the example to see how you can use data parameter of jqGrid.

I have this same issue. I have a "local" jqgrid setup and it's showing my data but the pager values aren't completely accurate. Until I figured out that I needed to muck with the 'localReader' property. On the jqgrid wiki I saw that the jsonReader can have functions that define how to get the page, records, etc. It also states that the localReader can do whatever the jsonReader does so I gave it shot. Here's what I am doing.
var grid = $('#table').jqGrid({
datatype: 'local',
altRows: true,
colModel: [
{name: '0', label: "Name"},
{name: '1', label: "Color"},
],
pager: "#pager",
rowNum: 15,
sortname: '0',
viewrecords: true,
gridview: true,
height: '100%',
autowidth: '100%'
});
var reader = {
root: function(obj) { return results.rows; },
page: function(obj) { return results.page; },
total: function(obj) { return results.total; },
records: function(obj) { return results.records; },
grid.setGridParam({data: results.rows, localReader: reader}).trigger('reloadGrid');
My "results" is an object like this:
{page: "1", total: "70", records: "1045", rows:[.....]}
This seems to work as desired.