Jquery : Simulate User click on Previous button/link

Question

Hy Guys,

What I am doing with the following code is convert a manually (by user clicks) navigated paginated table rows into auto advance by simulating user clicks on Previous -Next pagination buttons.

I used following setInterval function to advance to next page by simulating a mouse click on Next button "#tablepress-1_next" and that works fine.

window.setInterval(function() 
    { 
        $('#tablepress-1_next').triggerHandler('click');
    }, 6000);

});

Now I would like to navigate backwards by simulating user click on "Previous" button but that a bit too much for me as I am jquery noob. Can anybuddy help modify the above function so that it simulate click on "Previous" button ("#tablepress-1_prev") when all rows have been advanced forwardly or may be start again from Page-1 rather than navigating backwards-2-forward.

Tablepress adds a "disabled" class to "Previous"button if it's Page-1 and to "Next" button if it's the last page.

Tablepress is a wordpress plugin.

Thanks Regards, dkj

score 1 · Accepted Answer · answered Mar 10 '15 at 16:10

1

I wouldn't recommend to handle the navigation using DOM events if there is an API available for this purpose. The DataTables API offers some functions to handle navigation, I added a working jsfiddle that demonstrates the functionality. Basically these lines of code are required to handle automatic pagination:

// create the DataTable 
var table = $('#example').DataTable();
// retrieve the page information
var info = table.page.info();
// initialise the paging direction
var direction= 'asc';

// in case there are more than 1 pages of data, start pagination 
if (info.pages > 1) {
  // start cycling the pages now
  window.setInterval(function() {
    if (direction=='asc') {
      table.page( 'next' ).draw( false );
      // switch directions if last page of data shown
      if (table.page()+1 == info.pages) direction= 'desc';
    } else {
      table.page( 'previous' ).draw( false );
      // switch directions if the first page of data is shown
      if (table.page() == 1) direction= 'asc';   
    }
  }, 2000);
}

Good luck and let me know if that worked for you!

answered Mar 10 '15 at 16:10

SaschaM78

4,376
4
33
42

Hi, Thanks you so much for your help. Tablepress developer formatted the code as – dkjain Mar 11 '15 at 13:59
Hi, Thanks you so much for your help. Tablepress developer suggested to include your code as a callback function for the initComplete callback, by extending the code a little bit. Check out this [Fiddle](https://jsfiddle.net/ruwkzbbz/) but that unfortunately that did not work. Quite Strange as the [DataTable API] (https://datatables.net/reference/type/DataTables.Settings) format & call seems is correct. Could u try make this work ? – dkjain Mar 11 '15 at 14:12
First a short remark about SO markup syntax for links: there should be no space between closing square and opening round bracket when posting links. The syntax of your version is incorrect, you try to extend dataTable instead of adding a handler for the complete event. I updated my fiddle to incorporate the suggested change, have a look [here](http://jsfiddle.net/Moonbird_IT/HEDvf/2351/) – SaschaM78 Mar 11 '15 at 15:11
Okay! That Gr8, Will report back soon, thanks a mill. – dkjain Mar 11 '15 at 16:18
Ok. With a bit of help from Tablepress developer. It seems to be working as desired. Can the click simulation have a fadeIn as we can do on a jquery selector. – dkjain Mar 12 '15 at 15:28
This would have to be implemented in the DataTables/Tablepress plugin but I couldn't find any methods or properties suggesting it is currently available or under development. Perhaps the Tablepress developer can help. – SaschaM78 Mar 12 '15 at 15:50
Well SaschaM78, no problem. Sincerely man I appreciate your attitude and taking that extra step towards helping out beginners like me which really gives lots of confidence and makes SO what it is today. From the core, I sincerely wants to thank u for your valuable time and help. Cheers..and bow to the master. – dkjain Mar 13 '15 at 06:20
Really appreciate your feedback, it makes helping easy if the help is accepted. Regarding your `fadeIn` question, perhaps this [updated fiddle](http://jsfiddle.net/Moonbird_IT/HEDvf/2366/) could be close to what you wanted. It uses a white overlay to hide the table while it switches to the next page and then is faded out again. I also included a "pause animation" function. Let me know if that was of help! – SaschaM78 Mar 13 '15 at 15:03
hy, thanks with that, I think that should be it but at this moment I'm caught up with another problem. Can u plz try your helping me with this http://stackoverflow.com/questions/29448844/simulate-mouse-click-on-youtube-videos-on-android-kitkat....thanks again – dkjain Apr 05 '15 at 07:18

Jquery : Simulate User click on Previous button/link

1 Answers1