Pagination is not consistent/working

Question

I have 8000 rows of data in JSON format available in the client-side, after making an Ajax call to the database in JavaScript, that I need to populate into HTML tables for display.

I am trying to run the code below but I face the following problems: since I have large data, when I query on a web interface, several Ajax calls are made to pull data from a database and displays the same on the HTML page.

I am facing the following problems:

1. I see pagination only when the result is very large
2. When pagination appears, all data is loaded on the page at first, not the 10 or 25 per page and so my jQuery script becomes unresponsive. But after I toggle the paging size filter-10,25,50,or 100, the right number of results appear.

The code I am trying is below.

HTML:

    <table id="tableprint" class="data-grid" size="50">
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Profession</th>
          <th>Address</th>
          <th>Comments</th>
        </tr>
      </thead>
    </table>

JAVASCRIPT:

success: function(data) {
   $('#tableprint').dataTable({
      "aaData": jsonArrayOfjsonObjects.json, //this is a json with 8000 table rows of data
      "aoColumnsDef": [{
         "mData": "name"
      }, {
         "mData": "age"
      }, {
         "mData": "profession"
      }, {
         "mData": "address"
      }, {
         "mData": "comments",
         "defaultContent": "Empty"
      }, ],
      "bDestroy": true
   }).fnDestroy();

   $('#tableprint').dataTable({
      "bDestroy": true
   }).fnDestroy();
}

FYI, I am destroying the datatable instance as I got the "cannot reinstantiate DataTable" error and this was the recommended solution for this.

   $.ajax({
        type : 'POST',
        url : 'sendData',
        data : { //Send form data to the Servlet
            sid : sid,
            mpid : mpid
        },
        success : function(data) {
            $('#tableprint').dataTable({
               "aaData" : data.ActionsArr,
               "bPaginate":"true",
               "sPaginationType":"full_numbers",
               // etc..
        }

The above Ajax Post, is called everytime the user clicks on the submit button on the form with a different sid and mpid values.

Included JS files:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>

Answer 1

Add the following:

 "paging": true,
 "pageLength": 25, //or whatever you want the page length to be

after this line:

"aaData" : jsonArrayOfjsonObjects.json,