jquery.ajaxTables-usage.html

...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script>
       // configuration structure
       var config = {
	    pagenumber : 1,
	    activeclassname : 'active', // class used to mark active paging link
	    initialpage : 1,
	    sourceurl : '', // url to your data source
	    countsourceurl : '', // url to your data count source
	    onpage : 10,
	    buildGetData : function (offset, limit){
	        return {
	            "filter": JSON.stringify({offset:offset, limit:limit}) // build custom paging params
	        }
	    },
	    onOutOfRange : function (requestedPage){ 
	        alert('Out of range!'); // own out of range notification 
	    }
	}

        // simple automatic usage
	$(function(){
		$('.ajax-table-component').ajaxTables(); // pass config to plugin constructor .ajaxTables(config)
	});


</script>
...


<!-- you can also use data attributes to pass configuation to plugin, specially for this component -->
<div class="ajax-table-component" data-sourceurl="rows" data-countsourceurl="count" data-onpage="5"> 
 	<table class="ajax-table table table-stripped">
       <thead>
           <tr>
               <!-- in table header you have to define which object attributes will be in which collumn -->
               <th data-column="id">id</th> 
               <th data-column="title">title</th>
               <th data-column="date">date</th>
           </tr>
        </thead>
        <tbody>
            <tr>
                <!-- some initial table state -->
                <td colspan="3" class="initialCell">loading data</td>
            </tr>
        </tbody>
	</table>
	<div class="pagination">
	  <ul>
            <!-- prev, next and page-specific links require data attributes like this 
                 PLEASE NOTICE special data attribute "data-to-pattern"!
                 - element marked with this attribute will be used as a pattern to populate 
                 rest of the navigation links 
                 (why? to give you option to use your own markup in paging element)
            -->
	    <li><a href="#" data-navigate-prev>Prev</a></li>
	    <li data-to-pattern><a href="#" data-navigate-to>1</a></li>
	    <li><a href="#" data-navigate-next>Next</a></li>
	  </ul>
	</div>
</div>