Update smarty variable via ajax using twbs Pagination plugin

Question

I am using twbs pagination plugin, and on each click on the page number, an ajax call is fired and 10 results per page are fetched. On the page upload, first 10 results are fetched and assigned to a smarty variable.

Here is the tpl file. I am assigning the fetched array from php to the variable batchesData and iterating it using a foreach loop to display it in tabular form

 <table class="table table-striped projects tablesorter" 
  id="batchTable" style="font-size: 13px;">
 <th>
 .....
 .....
 </th>
 <tbody>
 {if !empty($batchesData)}
 {foreach from = $batchesData key = filter item = value}
 <tr>
 ......
 ......
 </tr>
 {/foreach}
  </tbody>
 </table>

Now on page click, here is my js code, I can fetch the array according to the page no from php but how do I update it because I guess smarty execution is done way before the ajax calls. Please suggest

    $(function () {
        window.pagObj = $('#pagination').twbsPagination({
            totalPages: 35,
            visiblePages: 10,
            onPageClick: function (event, page) {
                $.ajax({
                    type : 'POST',
                    url : '/mbatch/batch/listBatch',
                    data : {
                        page: page,
                    },
                    beforeSend : function() {

                    },
                    success : function(response) {
                    /* Handling */
                    },
                    error : function(data) {
                        new PNotify({
                            title: 'Notice',
                            text: JSON.parse(data.responseText).message,
                            type: 'error',
                            styling: 'bootstrap3'
                        }); 
                    }
                });
            }
        }).on('page', function (event, page) {
        });
    });

Any leads would be highly appreciated. Here is the plugin link http://www.jqueryscript.net/demo/Simple-Customizable-Pagination-Plugin-with-jQuery-Bootstrap-Twbs-Pagination/

Answer 1

Try this :

     $(function () {
    window.pagObj = $('#pagination').twbsPagination({
        totalPages: 35,
        visiblePages: 10,
        onPageClick: function (event, page) {
            $.ajax({
                type : 'POST',
                url : '/mbatch/batch/listBatch',
                data : {
                    page: page,
                },
                beforeSend : function() {

                },
                success : function(response) {
                $("#batchTable").empty();//clearing the current table rows
                var dataRes=JSON.parse(response);
                var resultCount=dataRes.length; //Assuming result set in array form.
                //now creating row for each result set and appending to table
                $.each(dataRes,function(index,value){
                $("#batchTable").append("<tr>
               <td>"+
              value.item1+" 
              </td>
              <td>"+
              value.item2+"
              </td>
               </tr>")
                })
                },
                error : function(data) {
                    new PNotify({
                        title: 'Notice',
                        text: JSON.parse(data.responseText).message,
                        type: 'error',
                        styling: 'bootstrap3'
                    }); 
                }
            });
        }
    }).on('page', function (event, page) {
    });
});

Assuming your response will be in json format. Set your format accordingly in the the success function