Is there a way ?

ab_cd · April 2023

Test Case at https://live.datatables.net/vusoweta/1/edit

The above test case consists of two same tables in a page using multi table settings.

1) So whether it possible to sync the changes that any of the table automatically reflects the same on the other table ?

For example if the page changes on the top table also reflects the same change in the bottom table as well and vice versa.

don't know how to script.

2) How to refresh the cache and load the page from server as new with a button click ?

Does it work

'$(".refresh-th-cache-and-load-the-page-from-server").click(function(){

table.clear().window.location.reload();

});

3) How to refresh the cache and reload the table only as new with a button click ?

Does it work

$(".refresh-the-cache-and-reload-the-table-only-as-new").click(function(){

table.clear().table.draw();

});

4) Whether it possible to show the all changes / action result by the user like sorting, paging, pagelength and search in a custom division ?

create the

Show the current actions result here

but don't know how to script.

Any good help ?

kthorngren · April 2023

How to refresh the cache and load the page from server as new with a button click ?

That depends on how you are loading the table data. If you are using the ajax option then use ajax.reload() to refresh the table data via ajax. How are you loading the table data?

Your test case has this error when clicking the buttons:

caught ReferenceError: table is not defined

You haven't assign table with the Datatables API. See the API docs for details. You can assign the Datatables API for all the tables to one varaible, ie tables, and use tables() to access all or a subset of Datatables.

So whether it possible to sync the changes that any of the table automatically reflects the same on the other table ?

Yes. You can use the desired Datatables events such as page to get the page of the current table and set that page for the other tables using page().

How to refresh the cache and load the page from server as new with a button click ?

Maybe you just need to use window.location.reload(). You wont' be able to chain this off the Datatables API results, ie table.clear().

How to refresh the cache and reload the table only as new with a button click ?

As mentioned above it depends on how you are loading the table data.

Whether it possible to show the all changes / action result by the user like sorting, paging, pagelength and search in a custom division ?

Yes, similar answer to the first question. Use the desired event and API to get the current value.

See this updated example for keeping all the tables on the same page, updating the user actions with the page and reloading page with window.location.reload().
https://live.datatables.net/jifiyaci/1/edit

Kevin

ab_cd · April 2023

Cheers for the reply.

As per the live update updated my live test case as at

https://live.datatables.net/vusoweta/3/edit

And found the following issues

1) So whether it possible to sync the changes that any of the table automatically reflects the same on the other table ?

As you said with the sample

a) the above numbered at 1) only function with paging only.

So how to do the same with

1a) pagelength

1b) search

1c) order

3) How to refresh the cache and reload the table only as new with a button click ?

how to do that for an

3a) html table

3b) ajax data arrays (file like - data-arrays.text) or javascript arrays.

4) Whether it possible to show the all changes / action result by the user like sorting, paging, pagelength and search in a custom division ?

As per your script

Only works with pagination.

So how to get the result as

Showing page: 2 (with current page number + page info (Showing 11 to 12 of 12 entries) together ?

Also any way to add the above same with

4a) pagelength

4b) search

4c) order

Again cheers for the reply.

colin · April 2023

It might be easier to use the draw - then when one table is drawn, you can get the pagination/search/ordering/etc., and apply the same to the other table.

I'm intrigued on the use case is here - are both tables showing the same data? Would they always have the same number of entries?

Colin

kthorngren · April 2023

Colin's idea is a good one to handle all the events.

4a) pagelength

Use apge.info() to get the page length.

4b) search

Use search() to get the search term.

4c) order

Use order() to get the current table order.

3a) html table

Datatables doesn't build the HTML table. So a page reload or if you have functionality with your framework to repopulate the table you can call that.

3b) ajax data arrays (file like - data-arrays.text) or javascript arrays.

Use ajax.reload().

or javascript arrays.

Use clear() followed by rows.add() to add the new rows.

So how to get the result as

Showing page: 2 (with current page number + page info (Showing 11 to 12 of 12 entries) together ?

Use the page.info() API.

Kevin

kthorngren · April 2023

I should add that if you re-write just the HTML table then you will need to use destroy() before re-writing then reinitialize Datatables after the re-write is complete.

Kevin

ab_cd · April 2023

Cheers for the reply.

I'm intrigued on the use case is here - are both tables showing the same data? Would they always have the same number of entries?

Colin

Answer - Both the tables have the same data always.

ab_cd · April 2023

Cheers for the reply Kevin.

As per the reply from you

Add the below to get the result with pageLength

function enablePageInfo() {
    // Enable single page events for all Datatables
  
  $('table.display').one( 'page.dt', function (e) {
      
      // Turn off page events for all Datatables for the page() API call
      $('table.display').off( 'page.dt' );
    
      // Get the current table
      var table = tables.table(e.currentTarget);
      
      // Get the current page of the current table
      var info = table.page.info();
    
      // Set the page for all tables
      tables.info( info ).draw( 'info' );

      // Re-enable the single page event for the current table
      enablePageInfo( table );
    
      $('.user-actions').prepend( '<div>Showing page: ' + page + '</div>' );
    } );
    
  }
  
  var tables = $('table.display').DataTable();

  enablePageInfo();

But there is some mistakes in the script and because of that not working.

How to solve that ?

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

ab_cd · April 2023

updated test case with pageLenth script at

https://live.datatables.net/vusoweta/4/edit

allan · April 2023

If you need to keep two tables in sync, I'd do it something like this: https://live.datatables.net/vusoweta/5/edit .

I've made a tiny little plug-in that will apply the basic information from the state object (obtained through state()):

DataTable.Api.register('state.load()', function (state) {
    return this.iterator('table', function (ctx) {
        this.page(state.start / state.length);
        this.page.len(state.length);
        this.search(state.search.search);
        this.order(state.order);
        this.draw(false);
    });
});

Then you "just" need to call that on other tables when one is being updated. The key thing here is to not update itself, otherwise we'd create an infinite loop. Most of the logic below is to account for that:

$(document).ready(function () {
  var tables = $('table.display').DataTable();
  var updating = false;

  tables.iterator('table', function (s) {
    let api = new DataTable.Api(s);
    
    api.on('draw', function () {
      let state = api.state();
      
      if (! updating) {
        updating = true;
    
        tables.iterator('table', function (s2) {
          if (s2 !== s) {
            let otherApi = new DataTable.Api(s2);
          
            otherApi.state.load(state);
          }
        });
        
        updating = false;
      }
    });
  });
});

Allan

kthorngren · April 2023

That's a pretty neat solution. I didn't realize the stateSave object was updated even though stateSave isn't enabled.

Kevin

allan · April 2023

Yeah, that was one of the things Sandy did. You can now call state() at any time to get the table's current state. I had thought it could be used as a setter as well, but I must be misremembering that, or perhaps the development diverged from that idea.

Allan

ab_cd · April 2023

Cheers to Allan for providing the solution.

Anyhow with reference to Kevin

did with page.len for page length

and the code is as follows

function enablePageLen() {
    // Enable single page events for all Datatables
  
  $('table.display').one( 'page.dt', function (e) {
      
      // Turn off page events for all Datatables for the page() API call
      $('table.display').off( 'page.dt' );
    
      // Get the current table
      var table = tables.table(e.currentTarget);
      
      // Get the current page of the current table
      var len = table.page.len();
    
      // Set the page for all tables
      tables.page( len ).draw( 'len' );

      // Re-enable the single page event for the current table
      enablePageLen( table );
    
      $('.user-actions').prepend( '<div>Showing page: ' + page + '</div>' );
    } );
    
  }
  
 
 enablePageLen();

at https://live.datatables.net/vusoweta/8/edit

but not working. any help with that in that way as well ?

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

kthorngren · April 2023

Changing the page length doesn't fire the page event.

tables.page( len ).draw( 'len' );

The draw() API doesn't support passing in page.

Why don't you use Allan's solution since it grabs all of the information you asked for.

Kevin

ab_cd · April 2023

KEVIN,

Q = Question, A = answer

1Q) Why don't you use Allan's solution since it grabs all of the information you asked for.

1A) The scripts becomes heavy and loading time is more as well.

Could you able to show how to do with sorting the way you explained with pagination?

allan · April 2023

Can you give me a link showing the issue please? I'm really surprised my approach would have a negative impact on performance. I think it is actually a much simpler approach since you don't end up with recursive functions.

Allan

ab_cd · April 2023

Allan,

       unfortunately i'am unable to show the created page with the organization where trying to adopt the requirement unless it is available to the public officially due to their restrictions.

Hope you understand.

Definitely it's not a negative impact on datatable rather than the contents they used.

cheers.

colin · April 2023

Are you able to update your original test case with Allan's approach, which also demonstrates this negative impact that you're seeing? We don't need to see any sensitive data.

Colin

ab_cd · April 2023

All test cases are as follows

1) Original that describes the need

https://live.datatables.net/vusoweta/1/edit

2) solution from Kevin

https://live.datatables.net/jifiyaci/1/edit

3) updated test case with pageLenth script at

https://live.datatables.net/vusoweta/4/edit

(but not working)

4) Solution from Allan

If you need to keep two tables in sync, I'd do it something like this:

https://live.datatables.net/vusoweta/5/edit .

5) my last reply

KEVIN,

Q = Question, A = answer

1Q) Why don't you use Allan's solution since it grabs all of the information you asked for.

1A) The scripts becomes heavy and loading time is more as well.

Could you able to show how to do with sorting the way you explained with pagination?

allan · May 2023

I can't speak for Kevin, but I suspect the answer is no. Personally I don't think that approach is the right way to do it.

If my solution is too slow, and you only want paging, then remove the API calls for order, filtering etc.

But beyond that, as has been noted already, if you'd like us to be able to help further, we'd need a page that shows the issue, based on my example, or create your own on JSFiddle, etc.

Allan

Is there a way ?

Is there a way ?

Answers

Howdy, Stranger!

Categories

DataTables

Is there a way ?

Is there a way ?

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables