Is there a way ?

Is there a way ?

ab_cdab_cd Posts: 9Questions: 1Answers: 0

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 ?

Answers

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794

    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_cdab_cd Posts: 9Questions: 1Answers: 0

    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.

  • colincolin Posts: 15,177Questions: 1Answers: 2,590
    edited 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

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794

    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

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794

    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_cdab_cd Posts: 9Questions: 1Answers: 0

    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_cdab_cd Posts: 9Questions: 1Answers: 0
    edited 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_cdab_cd Posts: 9Questions: 1Answers: 0

    updated test case with pageLenth script at

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

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794

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

    Kevin

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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_cdab_cd Posts: 9Questions: 1Answers: 0
    edited 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.

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794

    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_cdab_cd Posts: 9Questions: 1Answers: 0

    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?

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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_cdab_cd Posts: 9Questions: 1Answers: 0

    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.

  • colincolin Posts: 15,177Questions: 1Answers: 2,590

    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_cdab_cd Posts: 9Questions: 1Answers: 0

    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?

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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

Sign In or Register to comment.