Implementing Bootpag pagination plugin for Datatable/html Table Clientside

Download the plugin here:

http://botmonster.com/jquery-bootpag/#.Wenp9FuCx1s
below html table a div need to be included as shown below:
// //table related html here... //
//now div for bootpag //

this is the way to initialize the plugin:

$('#page-selectionATS').bootpag({
                    total: totalRecords,
                    maxVisible: 5
                }).on("page", function (event, /* page number here */ num) {
                    //$("#content").html("Insert content"); // some ajax content loading...
                    //$("#tblAtsRankings tbody").append(itemHtml);

                    BindAtsRankingTable(num);
                });

Please check the following ajax call for more easier to know.... how to use it

 $.ajax({
        type: "POST",
        url: PageUrl + "api/NFLSchedule/LoadTeamDataATS",
        data: JSON.stringify(dtParamas),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (result) {
            
            console.log("BindAtsRankingTable");
            console.log(result);
            var r = result.item1;
            totalRecords = result.item2;
            itemHtml = "";
            if (r.length > 0) {
                for (var i = 0; i < r.length; i++) {
                    itemHtml += '' + r[i].atsRank + '

';
                    itemHtml += '' + r[i].team + '

';
                    itemHtml += '' + r[i].atsUnits + '

';
                    itemHtml += '' + r[i].atswlt + '

';
                    itemHtml += '' + r[i].ou + '

';
                    itemHtml += '';
                }
                if (tblATSRanking != null) {
                    tblATSRanking.destroy();
                }
                $("#tblAtsRankings tbody").html("");
                $("#tblAtsRankings tbody").append(itemHtml);

              //Initialising the data table
                tblATSRanking = $('#tblAtsRankings').DataTable(
                   {
                       "ordering": false,
                       "paging": false,
                       "searching": false,
                       "dom": 'rt<"bottom"p><"clear">'
                   });

                //Initialising the bootpag
                $('#page-selectionATS').bootpag({
                    total: totalRecords,
                    maxVisible: 5
                }).on("page", function (event, /* page number here */ num) {
                    //$("#content").html("Insert content"); // some ajax content loading...
                    //$("#tblAtsRankings tbody").append(itemHtml);

                    BindAtsRankingTable(num);
                });
            }
            else {
                itemHtml = "";
                itemHtml += 'no data available

';
                $("#tblAtsRankings tbody").html("");
                $("#tblAtsRankings tbody").append(itemHtml);



            }