Tag Archives: refresh

How to Refresh a DataTable without Losing Your Current Page or Ordering CodeUnit 28 MAY 2012

DataTables is a fantastic plug-in for the jQuery Javascript library that I use for pretty much all my web development projects. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table – in other words, it creates useful dynamic, with oodles of extra functionality, tables out of plain old vanilla HTML tables.

Anyway, there is often a need to be able to refresh your datatable after applying some action to the source data, and the usual method of forcing a refresh is by calling the standard fnDraw() function on the table object. However, whilst this will redraw the table, it will basically reset you completely, removing any filtering and jumping back to page 1 if you have a table with pagination.

So not ideal.

Thankfully one of the DataTables forum guys came up with a handy bit of extension code which introduces a new function called fnStandingRedraw() which extends the datatables API and allows you to fresh the datatable without losing your current view.

To implement, simply put the following code into a .js file and load it after you load the standard datatables.js library:

$.fn.dataTableExt.oApi.fnStandingRedraw = function(oSettings) {
    //redraw to account for filtering and sorting
    // concept here is that (for client side) there is a row got inserted at the end (for an add)
    // or when a record was modified it could be in the middle of the table
    // that is probably not supposed to be there - due to filtering / sorting
    // so we need to re process filtering and sorting
    // BUT - if it is server side - then this should be handled by the server - so skip this step
    if(oSettings.oFeatures.bServerSide === false){
        var before = oSettings._iDisplayStart;
        //iDisplayStart has been reset to zero - so lets change it back
        oSettings._iDisplayStart = before;
    //draw the 'current' page

Now on your page code, you can simply ask for a refresh by doing this:

//var oTable1 = $('#mytable').dataTable();


Related Link: http://datatables.net/

Javascript: How to Force a Page Reload and Jump to a Specified Anchor Name in the Process CodeUnit 30 JAN 2012

Anchor names are a great little browser extra that allows you to quickly jump to different sections on a web page courtesy of a handy little # declaration in the page URL. However, these do sometimes get in the way, for instance you want to reload a page’s contents via Javascript, but at the same time want to stay on the section of the page which the user was currently at.

If you specify the anchor name in the URL and to a location equals or reload like you normally would, then unfortunately for you the page won’t reload and will simply jump to the newly specified anchor name – definitely not the behaviour that we want! So how do we get around this then and force the page to first refresh, and then jump to the specified anchor name?

Well actually the answer is pretty simple really. We make use of the optional value of the window.location.reload function to force an actual reload (i.e. ignore the browser cache)!

In practice, first set the current window’s URL (i.e. the page you want to refresh) as the window.location.href value, specifying the anchor name you wish to jump to in the URL. Then call a window.location.reload, specifying true as the function parameter. In code, this would look like:

window.location.href = 'mypagetoreload.htm#jumptosection1';

And that is that. The page will first hard refresh itself and once refreshed, jump through to the specified section.


A Retouch or Two CodeUnit 28 APR 2010

So yesterday was Freedom Day, an important (aren’t they all) public holiday on the South African calendar and one which you can see I made good use of in terms of tinkering a bit with my CodeUnit site (not to mention sleeping in, watching Batman: Brave and the Bold, going for a walk with my wife along the beach and enjoying a nice follow-up lunch on the deck at Bertie’s Mooring).

Yes, yes, I hear you, yet another “meta” post that doesn’t contain any tech, code or website info and yes, I know I kind of just upgraded the site’s look and feel pretty damn recently – but hey, sue me, I change my mind – and preferences – quite a bit! :P

Also, it is pretty important to let all of you regular readers know that you need to press Ctrl+F5 to force a cache refresh of the page in order to see all the new stylesheet and image changes.

C’mon, it’s definitely worth it.

Now the CodeUnit of Craig feels all nice and clean and pretty – far better than that grungy feel I was going with last time around! :P