Keperluan * Twitter Bootstrap 3 * jQuery 1.6++ * Pemproses disebelah server (PHP, Go, Python)

tablePagination.js

!function ($) {
    $(function() {
    
        var mSurat = function(hlmSemasa, perLaman, JumlahRekod, skopDom, callback) {
			var RkdSudahTersiar = hlmSemasa * perLaman,
				lamanTerakhir   = Math.ceil(JumlahRekod / perLaman), 
				JumRkdSudahTersiar;
			if(RkdSudahTersiar > JumlahRekod)
				JumRkdSudahTersiar = JumlahRekod;
			else
				JumRkdSudahTersiar = RkdSudahTersiar;
		    $('h3', skopDom).append('<span class="label label-info blue"> [' + JumRkdSudahTersiar + '/' + JumlahRekod + ']</span>');
  			if (JumlahRekod > perLaman) {
  				skopDom.prepend('<div class="pull-right paging_container"></div>');
  				var bekas = $('.paging_container', skopDom);
					bekas.append('<ul class="pagination pagination-sm"><li><a class="sebelum"><span class="glyphicon glyphicon-chevron-left"></span> Sebelum</a></li><li><a class="seterusnya">Selepas <span class="glyphicon glyphicon-chevron-right"></span></a></li></ul>');
  				var pager = $('ul', bekas);  				
				// Sekiranya kita bukan berada di laman pertama, maka kita upayakan butang sebelum
  				if (hlmSemasa != 1) {
  					$('.sebelum').parent().removeClass('disabled');
  					$('.sebelum').attr('href', '#');
  					$('ul', container).on('click', '.sebelum', function(e) {  						
						// Halang pelayar beralih ke halaman lain
  						e.preventDefault();
						// Muat dan paparkan rekod sebelum dan kurangkan 1 pada hlmSemasa 
  						callback(--hlmSemasa);
  					});
  				} else {
  					$('.sebelum').parent().addClass('disabled');
  				}
  
  				//Sekiranya kita di muka surat terakhir, maka kita upayakan butang seterusnya
  				if (hlmSemasa != lamanTerakhir) {
  					$('.seterusnya').attr('href', '#');
  					$('ul', container).on('click', '.seterusnya', function(e) {
  						e.preventDefault();
  						callback(++hlmSemasa);
  					});
  					$('.seterusnya').parent().removeClass('disabled');
  				} else 
  					$('.seterusnya').parent().addClass('disabled');
  			}		
		};
        
		var dptSenaraiPoskod = function (listType, mukaSurat, had, sisih) {
			var opt = listType + ':' + mukaSurat + ':' + had + ':' + sisih;
			$.ajax({
				type: "POST",       // boleh saja tetapkan samada POST atau GET
				url: "/echo/json/", // tetapkan URL server anda disini
				data: opt,
				success: function (data) {
					var e = data;
					$('<table class="table table-striped table-condensed table-bordered list-user">').appendTo(document.body);
					$tbl = $('table', document.body);
					
					/** Didalam contoh ini saya memanggil satu senarai poskod Malaysia **/
					$tbl.append('<thead><tr>' +
							  '<td>Poskod</td>' +
							  '<td>Lokasi</td>' +
							  '<td>Pejabat Pos</td>' +
							  '<td>Kod Negeri</td>' +
							  '</tr></thead>');
						  

					$.each(v, function (m, y) {
					  $('<tr><td class="text-center">' + y.poskod + '</td>' +
						'<td>' + v.lokasi + '</td>' +
						'<td>' + v.pejabat_pos + '</td>' +
						'<td>' + v.kod_negeri + '</td>' +
						'</tr>').appendTo($tbl);
					});
						  
					mSurat(mukaSurat, 10, e.length, document.body, function (mukaSemasa) {
					  dptSenaraiPoskod(listType, mukaSemasa, had, sisih);
					  //panggil balik function yang sama
					});
				}
			});
		};

    /** Mula panggil data untuk dipaparkan dalam <table> **/
    dptSenaraiPoskod('53100', 1, 25, 'nama');

    })
}(window.jQuery)