Cursor based navigation for datatable

I was working on a module where data was comming from datastore and paginated using cursor. If you are not familier with datastore, then you can refer to this link.

In case of datastore we just have cursor to get next set of data. Though there is offset availabe in datastore its costly. So to be cost effective we have only option available is cursor.

Datastore decodes cursor and in response returns data associated with that cursor.

Now, If you are using bootstrap data-table you might find it cofusing that how to pass the cursor to your queryparameter.

Even I still don't get answer of how I can change data-queryparamter dynamically to update cursor on the url.

But instead I got another simple solution.

HTML Snippet

<table id="table" data-toggle="table" >
    <thead>
      <tr>
       // your data table fields
      </tr>
    </thead>
    <tbody></tbody>
</table>
<nav aria-label="Page navigation example" style="margin-top: 2%;">
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="#"  onclick="fetchPrevdata()">Previous</a></li>
      <li class="page-item"><a class="page-link" href="#" id="nextData" onclick="fetchNextdata()">Next</a></li>
    </ul>
</nav>

Below is Javascript

$(document).ready(function () {
  fetchFirst();
});


var cursors = [""];
var index = 0;

function fetchFirst(){

  alert("fetchFirst called")
  var url = "/winners-data?c=" + cursors[index]
  $.get(url)
    .done(function (data)
    {
      if(index == cursors.length-1 ){
        cursors.push(data.Cursor);     
      }             
    })
}

function fetchNextdata()
{  
  index++
  var url = "/url?c=" + cursors[index] 
  $.get(url)
    .done(function (data)
    {
      if(index == cursors.length-1 ){
        cursors.push(data.Cursor);          
      }   
      if (data.rows != null) {       
        $table.bootstrapTable('load', data.rows)
      }  
    })
}

function fetchPrevdata()
{
  index--;
  var url = "/url?c=" +  cursors[index]
  $.get(url)
    .done(function (data)
    {
      if (data.rows != null) {
        $table.bootstrapTable('load', data.rows)     
      }        
    })
}

Hopefully, You find it useful. If you any otherway to do this please share it via comments.