[Solved]-How to paginate multiple HTML tbodies with jQuery-d3.js

Glad you came back with what you've tried until now based off the comment I posted. I couldn't work on it yesterday as I got too busy with work. Anyway, got it working now.

I made a few changes to it and also added certain additional features (First, Prev, Next, Last) and seems to be working okay now.

HTML added:

<div id="toggle-buttons">
<button class="button" data-id="first">
          First Page
        </button>
<button class="button disabled" data-id="previous">
          Prev Page
        </button>
<button class="button" data-id="next">
          Next Page
        </button>
<button class="button" data-id="last">
          Last Page
        </button>            
<button class="button" id="all-button">
          Show All
</button>
</div>

Javascript to paginate the table based on the button click:

const totalBodies = $('tbody').length;
var counter = 0; // set counter initially to 0

d3.selectAll('#toggle-buttons button').on('click', function () {

if(d3.select(this).classed('disabled'))
    return ;

switch(d3.select(this).attr('data-id')) {
    case 'first':
        counter = 0;
    d3.select(this.parentNode).select('[data-id="previous"]').classed('disabled', true);
    d3.select(this.parentNode).select('[data-id="next"]').classed('disabled', false);
            break;
  case 'last':
        counter = totalBodies-1;
    d3.select(this.parentNode).select('[data-id="next"]').classed('disabled', true);        
    d3.select(this.parentNode).select('[data-id="previous"]').classed('disabled', false);        
    break;
  case 'next':
            counter++;
    if(counter === totalBodies-1) {
        d3.select(this).classed('disabled', true);
    }
        d3.select(this.parentNode).select('[data-id="previous"]').classed('disabled', false);         
    break;
  case 'previous':
            counter--;
    if(!counter) {
        d3.select(this).classed('disabled', true);
    }
        d3.select(this.parentNode).select('[data-id="next"]').classed('disabled', false);         
            break;
}
redraw(counter);
});

Explanation (pretty much understandable I suppose):

1. Switch case to determine the button click based on which the counter will change. Important Toggling the disabled class on the buttons.
2. redraw(counter) on every button click (unless it has a disabled class)

Here's a fork of your fiddle:

https://jsfiddle.net/shashank2104/noxg31eq/

I'm selecting the first page by default. You can change that according to the requirement and add the disabled class in the initial phase accordingly. Also, I see a table nested within a table which doesn't seem right - maybe tablesorter adds a table tag as well. You can take a look at that.

Hope this helps.