I have a table filled with data that I want to sort and filter.
I implemented an auto-refresh function, which loads data from the server each time, but I want to restore sort and filter options, which I can do.
I use trigger("reloadGrid",[{current:true}]), setting the datatype to json so that the data are retrieved from the server, in the autorefresh function, and the sort and filter options are used in the loadcomplete method with a setTimeout, as explained in other stackoverflow questions.
That works, but each time the grid refreshes, I see during one second the grid with the full data, not sorted nor filtered, and then the data are locally sorted/filtered.
Given that I want an 5 seconds auto-refresh, is there a way I can prevent the reloadGrid method from displaying the full data when there is a server request but wait for the reload in loadComplete to refresh the display?
Reload used in the autorefresh function :
$("#MyGrid").jqGrid("setGridParam",{url:"list.php", datatype:"json"}).trigger("reloadGrid",[{current:true}]);
Model :
jQuery("#MyGrid").jqGrid({
url:'list.php',
datatype: "json",
loadonce:true,
...
loadComplete: function(){
if ($("#MyGrid").jqGrid("getGridParam", "datatype") !== "local") {
setTimeout(function () {
$("#MyGrid").jqGrid("setGridParam",{search:srch,postData:post});
})
};
}
You can use setInterval JavaScript function to do automatic refreshing
var grid = $("#list"),
intervalId = setInterval(
function() {
grid.trigger("reloadGrid",[{current:true}]);
},
60000); // Every 1 min
to stop the grid reload you can use one more JavaScript function:
clearInterval(intervalId);
In the "reloadGrid" I use less known parameter current:true which is described here to preserve the current selection in the grid.
You can see the Reload Jqgrid by given interval
Related
I have implemented a grid with server side paging, sorting, filtering. Now my user has saved that grid with all the sorting, filtering information. I have generated a query with all these information. That means, when I load that grid again, I am giving the filtered and sorted data to the grid. Even though I have given the sorted, filtered data, now the events hits the DB since I am applying the filtering and sorting properties as below. In this situation, If I have sorted 7 fields in the grid, it hits DB 8 times (7 for applying filter and one for loading the grid for the first time). This makes so many performance issues.
$(openFrom + "#jqxgrid").jqxGrid('sortby', sessionStorage.getItem("GridSortColumn"), sortdirectionvalue);
$(openFrom + "#jqxgrid").jqxGrid('addfilter', currentColumnFilterValue['columnname'], filterGroup);
$(openFrom + "#jqxgrid").jqxGrid('applyfilters');
Here is my source object.
var source =
{
datafields: DataFields,
datatype: "json",
async: false,//If it is true, server side filtering and sorting won't work together
url: '../Widget/GetDataForGrid/',
type: 'POST',
sort: function () {
},
filter: function () {
},
beforeprocessing: function (data) {
}
};
So my requirement is, I just need to show the filter, sort selection in the grid without going to DB. This is applicable only for the first time(When the grid with sorted, filtered information loads first). And when the user click the filter again or user tries to sort another field, it should work as in server side filtering and sorting.
Any help is much appreciated.
I have solved it myself.
I created a variable and initiated it in the document ready as follows.
var isFilterSortGrid = false;
Change sort filter functions in source object as follows.
sort: function () {
if (isFilterSortGrid) {
$("#jqxgrid").jqxGrid('updatebounddata', 'sort');
}
},
filter: function () {
if (isFilterSortGrid) {
$("#jqxgrid").jqxGrid('updatebounddata', 'filter');
}
}
And finally in filter and clear button click I made that variable true again.
$(document).on('click', '#filterbuttonjqxgrid', function () {
isFilterSortGrid = true;
});
$(document).on('click', '#filterclearbuttonjqxgrid', function () {
isFilterSortGrid = true;
});
I am applying the filter and sorting as normal, so that the filter selection will be there.
After using table.destroy() method my table rows are still displayed, only the search box and other borders of datatable are not displayed.
I want to delete all the rows in the datatable, basically i want to delete the whole datatable so that i can reinitialize it.
Thank you
When you use the destroy() method you are effectively returning the table back to its original state. The HTML for the table is still present on the page hence why you can still see the table rows, without the added DataTables functionality.
If you want to remove the data rows from your DataTable, you may want to look at the clear() method, for example:
table.clear();
I have set up a jsfiddle which demonstrates these options.
If you can provide your code I should be able to give you a more accurate answer.
In case someone else finds this thread, I had the same issue when trying to replace a datatable with an ajax call. Calling destroy and then reinitializing the datatable after the ajax response worked for me with no errors. documentation
$('#myTrigger').click(function(e){
e.preventDefault();
table.destroy();
$.ajax({
type: 'post',
url: 'processor.php',
data: $('#myform').serialize(),
success: function (response) {
var table = $('#myTable').DataTable({
"pageLength": 25
});
}
});
});
I need to display a number of "dynamic" grids using jqGrid. By dynamic I mean that both definition and data of the grid are retrieved from a database. There are many grids on the page, so I am trying to minimize the number of server trips, and there is a lot of data, so server-side paging is a must.
My workflow is
On initialization of each grid, retrieve grid definition and first
page of data in one server call.
If a user sorts/pages, then retrieve a page of data from the server
Because I want to retrieve the grid definition and first page of data in one call, I cannot use datatype: 'json', url: '###' approach; instead I do:
grid.jqGrid({
mtype: 'post',
...
datatype: function (postdata) {
if (!init.data) {
var request = {
screenId: settings.screenId,
pageNumber: postdata.page,
pageSize: postdata.rows,
sortColumn: postdata.sidx,
sortDirection: postdata.sortd,
date: settings.date
};
site.callWs("/MyService", request, function (pageResponse) {
//WHAT TO CALL HERE TO SET A PAGE OF DATA?
});
} else {
//WHAT TO CALL HERE TO SET A PAGE OF DATA?
init.data = null;
}
}
});
My data object (pageResponse or init.data) looks like this
I am not sure what method to call on jqGrid once a page of data is returned. I considered addJSONData, but it seems so inefficient to convert JSON back to string, then use EVAL(). Also, considered addRowData or setting the data property, but I am confused how to instruct jqGrid that I am doing server-side paging -- if I set the data property to one page of records, what do I need to do to tell jqGrid that there is a total of 50 records and this is page 1 out of 10.
Thanks for your help.
It was a user error (mine :). I had some show/hide logic in loadComplete of jqGrid, but this event does not fire when addJSONData is called.
addJSONData works just fine when provided with a properly-structured JavaScript object.
This is a mock of what I'm doing:
function loadPage(pn) {
$('#'+pn).live('pagecreate',function(event, ui){
$('#'+pn+'-submit').click( function() {
$.mobile.changePage({
url: 'page.php?parm=value',
type: 'post',
data: $('form#'+pn+'_form')
},'slide',false,false);
loadAjaxPages(pn);
});
});
function loadAjaxPages(page) {
// this returns the page I want, all is working
$.ajax({
url: 'page.php?parm=value',
type: 'POST',
error : function (){ document.title='error'; },
success: function (data) {
$('#display_'+page+'_page').html(data); // removed .page(), causing page to transition, but if I use .page() I can see the desired listview
}
});
}
in the ajax call return if I add the .page() (which worked in the past but I had it out side of the page function, changing the logic on how I load pages to save on loading times), make the page transition to the next page but I can see the listview is styled the way I want:
$('#display_'+page+'_page').html(data).page();
Removing .page() fixes the transition error but now the page does not style. I have tried listview('refresh') and even listview('refresh',true) but no luck.
Any thoughts on how I can get the listview to refresh?
Solution:
$.ajax({
url: 'page.php?parm=value',
type: 'POST',
error : function (){ document.title='error'; },
success: function (data) {
$('#display_'+page+'_page').html(data);
$("div#name ul").listview(); // add div wrapper w/ name attr to use the refresh
}
});
Be sure to call .listview on the ul element
If it didn't style earlier, you just call .listview(), bot the refresh function. If your firebug setup is correct, you should have seen an error message telling you that.
I didn't have time to get down to creating some code before you posted your fix, but here's a little recommendation from me:
if(data !== null){ $('#display_'+page+'_page').html(data).find("ul").listview() }
This is a bit nicer than a new global selector. Also - you don't need the div and you can provide a detailed selector if you have multiple ULs.
caution: the above code requires data !== null. If it's null - it will throw an error.
If you add items to a listview, you'll need to call the refresh() method on it to update the styles and create any nested lists that are added. For example:
$('#mylist').listview('refresh');
Note that the refresh() method only affects new nodes appended to a list. This is done for performance reasons. Any list items already enhanced will be ignored by the refresh process. This means that if you change the contents or attributes on an already enhanced list item, these won't be reflected. If you want a list item to be updated, replace it with fresh markup before calling refresh.
more info here.
I have a jQuery application, a shopping cart, that posts back info to the server, if the text inputfield is changed. This is done in an Ajax request. Now, if the Ajaxrequest is a success, I want to reload the shoppingcart asynchronously. The code is as follows:
$(document).ready(function() {
var jInput = $(":input");
jInput.change(function() {
var vareAntal = $(this).val();
var vareID = $(this).siblings("input#vareID").val();
$.ajax({
type: 'POST',
url: 'checkout.aspx',
data: { 'ID': vareID, 'Antal': vareAntal },
success: function() {
$("#newbasket").load(location.href + " #newbasket>*", "");
}
});
});
});
This works, but only once! If I change the text inputfield, after the page is loaded for the first time, the div with the ID of newbasket reloads asynchronously. But if I try to change it again, nothing happens.
I've tried to do some debugging with Firebug, and the first time I change the text inputfield, it fires a POST-event, and afterwards a GET-event, when the POST-event is succesful. But after that, nothing happens when I change the text inputfield again.
So, how do I achieve triggering the .load() method after each text input change?
I've also tried experimenting with the .ajaxComplete() function, but that, of course, resulted in an infinite loop, since the .load() is an ajax-object.
Instead of .change(func), use .live('change', func) here, like this:
jInput.live('change', function() {
This will make the selector work on any new inputs added as well. When you're replacing the elements like you are currently, their event handlers are lost (or rather, not re-created, because you have new elements). .live() is just for this purpose, it listens for events from old and new elements, regardless of when they were added.