bootstrap-pagingtable.js is a jQuery plugin for Twitter Bootstrap that renders data in a table with paging, sorting and editing.

• jQuery v1.8+
• Bootstrap v3.0+ (bootstrap-v2-pagingtable.js is for Bootstrap v2)

Include required css and js files:

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

Include pagingtable js files:

<script src="bootstrap-pagingtable.js"></script>

Create a place holder in your HTML page:

<div><table id="sample-table" class="table"></table></div>

Configure your table:

var options = {
    colModels: [
        {name:'name', header:'Name', key:true, sortable:true},
        {name:'price', header:'Price', sortable:true},
        {name:'quantity', header:'Quantity', sortable:true}
    ],
    localData: {'records':[{'name':'orange', 'price':1.2, 'quantity':10}
        , {'name':'apple', 'price':2.0, 'quantity':8}
        , {'name':'banana', 'price':0.8, 'quantity':15}
        , {'name':'grape', 'price':0.4, 'quantity':30}
        , {'name':'strawberry', 'price':0.5, 'quantity':24}]},
    isPageable: true
};

$(function() {
    $('#sample-table').pagingtable(options);
});

{page:0, pageSize:10, totalRecords:500, records:[{your data}]}

paramNames can be changed to fix your need, default is: {page:'page', pageSize:'pageSize', records:'records', totalRecords:'totalRecords', sort:'sort', sortDir:'sortDir'}

.pagingtable('getSelectedRowId')

.pagingtable('getSelectedRowIds')

.pagingtable('getRowData', rowId)

.pagingtable('getAllRowData')

.pagingtable('getSelectedRowData')

.pagingtable('getMultiSelectedRowData')

.pagingtable('reload')

.pagingtable('addRow')

.pagingtable('updateRow', rowId)

.pagingtable('deleteRow', {id:'id or key column', displayColName:'column to display in confirm modal', separator:'to separate multiple row IDs, default is ,', paramName:'parameter to be sent to server, default is id or key name', method:'HTTP method, default is POST'}) (separator, paramName and method are ignored when remote.isRest is true)

Q: How to reload the table after changed the Option->remote->params.

A: $('#your-table-id').off('.pagingtable').removeData('pagingtable').empty();

=======