<p><strong> apa itu bootstrap??</strong></p>
<p>Bootstrap adalah sebuah alat bantu untuk membuat sebuah tampilan halaman website yang dapat mempercepat pekerjaan seorang pengembang website ataupun pendesain halaman website. Sesuai namanya, website yang dibuat dengan alat bantu ini memiliki tampilan halaman yang sama / mirip dengan tampilan halaman Twitter atau desainer juga dapat mengubah tampilan halaman website sesuai dengan kebutuhan. <em>(sumber : <a href="https://id.wikipedia.org/wiki/Twitter_Bootstrap">wikipedia</a>)</em></p>
<p><strong>apa itu pagination? </strong></p>
<p>Pagination adalah proses membagi dokumen ke dalam diskrit halaman , baik halaman elektronik atau halaman yang dicetak.</p>
<p>lalu kapan kira-kira kita harus menggunakan paging/pagination pada sebuah halaman ?? yaitu saat kita berhadapan dengan jumlah data yang sangat banyak dan tidak memungkinkan kita menampilkan keseluruhan data dalam satu halaman, karena akan memakan kapasitas yang besar.</p>
<p>Contohnya adalah Google , dimana di setiap hasil pencarian mereka membuat sebuah paging karena hasil data pencariannya terlalu banyak.</p>
<p>Tapi yang akan kita buat ini adalah pagination dalam bentuk tabel dengan memanfaatkan frameworks bootstrap dan plugin datatable. tapi sebelum kita memulai membuat pagination dengan bootstrap pastikan kalian sudah melakukan installasi bootstrap dengan benar. <em>(baca : <a href="https://www.tutorialpedia.net/tutorial-cara-menggunakan-bootstrap-untuk-pemula/">cara menggunakan boostrap</a>)</em></p>
<p>Untuk membuat table pagination memang sudah disediakan langsung oleh bootstrap. tapi menurut saya table bootstrap kurang lengkap fiturnya. Oleh karena itu, kita akan menggunakan plugins <span style="color: #0e0ec2;"><a style="color: #0e0ec2;" href="http://datatables.net" target="_blank">datatables</a></span> yang mana plugins ini di khususkan dalam hal membuat table.</p>
<p>Fitur-Fitur <span style="color: #0e0ec2;"><a style="color: #0e0ec2;" href="http://datatables.net" target="_blank">DataTables</a></span> yaitu:</p>
<ul style="list-style-type: disc;">
<li>AutoWidth</li>
<li>DeferRender</li>
<li>Filter</li>
<li>Info</li>
<li>JQuery UI</li>
<li>LenghtChange</li>
<li>Pagination</li>
</ul>
<p><span style="color: #0e0ec2;"><a style="color: #0e0ec2;" href="http://legacy.datatables.net/usage/features" target="_blank"> Selengkapnya>;>;</a></span></p>
<h2><strong>Cara Membuat Table Pagination:</strong></h2>
<p>Ada 2 Cara untuk melakukan installasi dataTables ini yaitu:</p>
<p>&#8211; Menggunakan CDN (Harus dalam keadaan connect internet)</p>
<p>&#8211; Lokal (Offline)</p>
<h4><strong>Menggunakan CDN (<a href="http://en.wikipedia.org/wiki/Content_delivery_network" target="_blank">Content Delivery Network</a>)</strong></h4>
<ul>
<li>Masukkan Code Dibawah ini diantara <strong><;head>; <;/head>; :</strong></li>
</ul>
<pre class="lang:default decode:true "><;!-- Bootstrap CSS -->; 
<;!-- Bootstrap DataTables CSS -->; 
<;!-- Jquery -->; 
<;script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.10.2.min.js">;<;/script>; 
<;!-- Jquery DataTables -->; 
<;script type="text/javascript" language="javascript" src="http:////cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js">;<;/script>; 
<;!-- Bootstrap dataTables Javascript -->; 
<;script type="text/javascript" language="javascript" src="http://cdn.datatables.net/plug-ins/9dcbecd42ad/integration/bootstrap/3/dataTables.bootstrap.js">;<;/script>;</pre>
<ul>
<li>Sekarang kita panggil Fungsi javaScript dataTables nya, dengan selector <span style="color: #000000;"><span style="color: #0e0ec2;">class=&#8221;table-paginate&#8221;</span>.</span></li>
<li>Copy Script dibawah ini paste di antara <strong><;head>; <;/head>;</strong> atau di atas tag <strong><;/body>;</strong>.</li>
</ul>
<pre class="lang:default decode:true"><;!-- Panggil Fungsi -->; 
<;script type="text/javascript" charset="utf-8">; 
 $(document).ready(function() { 
	$('.table-paginate').dataTable(); 
 } ); 
<;/script>;</pre>
<p>Selectors bisa menggunakan id , atau class. tapi disini saya referensikan menggunakan class. karena bisa digunakan dibanyak table. jika menggunakan id hanya bisa pada satu table.</p>
<p><strong>Membuat Table Dummy </strong></p>
<ul>
<li>Copy code dibawah ini diantara tag <strong><;body>; <;/body>;</strong> jangan lupa memberi <strong>class=&#8221;table-paginate&#8221;</strong> sesuai selectors yang kita buat tadi.</li>
</ul>
<pre class="lang:default decode:true"><;table class="table table-striped table-bordered table-paginate" cellspacing="0" width="100%">; 
 <;thead>; 
 <;tr>; 
 <;th>;Name<;/th>; 
 <;th>;Position<;/th>; 
 <;th>;Office<;/th>; 
 <;th>;Age<;/th>; 
 <;th>;Start date<;/th>; 
 <;th>;Salary<;/th>; 
 <;/tr>; 
 <;/thead>; 
 
 <;tfoot>; 
 <;tr>; 
 <;th>;Name<;/th>; 
 <;th>;Position<;/th>; 
 <;th>;Office<;/th>; 
 <;th>;Age<;/th>; 
 <;th>;Start date<;/th>; 
 <;th>;Salary<;/th>; 
 <;/tr>; 
 <;/tfoot>; 
 
 <;tbody>; 
 <;tr>; 
 <;td>;Tiger Nixon<;/td>; 
 <;td>;System Architect<;/td>; 
 <;td>;Edinburgh<;/td>; 
 <;td>;61<;/td>; 
 <;td>;2011/04/25<;/td>; 
 <;td>;$320,800<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Garrett Winters<;/td>; 
 <;td>;Accountant<;/td>; 
 <;td>;Tokyo<;/td>; 
 <;td>;63<;/td>; 
 <;td>;2011/07/25<;/td>; 
 <;td>;$170,750<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Ashton Cox<;/td>; 
 <;td>;Junior Technical Author<;/td>; 
 <;td>;San Francisco<;/td>; 
 <;td>;66<;/td>; 
 <;td>;2009/01/12<;/td>; 
 <;td>;$86,000<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Cedric Kelly<;/td>; 
 <;td>;Senior Javascript Developer<;/td>; 
 <;td>;Edinburgh<;/td>; 
 <;td>;22<;/td>; 
 <;td>;2012/03/29<;/td>; 
 <;td>;$433,060<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Airi Satou<;/td>; 
 <;td>;Accountant<;/td>; 
 <;td>;Tokyo<;/td>; 
 <;td>;33<;/td>; 
 <;td>;2008/11/28<;/td>; 
 <;td>;$162,700<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Brielle Williamson<;/td>; 
 <;td>;Integration Specialist<;/td>; 
 <;td>;New York<;/td>; 
 <;td>;61<;/td>; 
 <;td>;2012/12/02<;/td>; 
 <;td>;$372,000<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Herrod Chandler<;/td>; 
 <;td>;Sales Assistant<;/td>; 
 <;td>;San Francisco<;/td>; 
 <;td>;59<;/td>; 
 <;td>;2012/08/06<;/td>; 
 <;td>;$137,500<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Rhona Davidson<;/td>; 
 <;td>;Integration Specialist<;/td>; 
 <;td>;Tokyo<;/td>; 
 <;td>;55<;/td>; 
 <;td>;2010/10/14<;/td>; 
 <;td>;$327,900<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Colleen Hurst<;/td>; 
 <;td>;Javascript Developer<;/td>; 
 <;td>;San Francisco<;/td>; 
 <;td>;39<;/td>; 
 <;td>;2009/09/15<;/td>; 
 <;td>;$205,500<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Sonya Frost<;/td>; 
 <;td>;Software Engineer<;/td>; 
 <;td>;Edinburgh<;/td>; 
 <;td>;23<;/td>; 
 <;td>;2008/12/13<;/td>; 
 <;td>;$103,600<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Jena Gaines<;/td>; 
 <;td>;Office Manager<;/td>; 
 <;td>;London<;/td>; 
 <;td>;30<;/td>; 
 <;td>;2008/12/19<;/td>; 
 <;td>;$90,560<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Quinn Flynn<;/td>; 
 <;td>;Support Lead<;/td>; 
 <;td>;Edinburgh<;/td>; 
 <;td>;22<;/td>; 
 <;td>;2013/03/03<;/td>; 
 <;td>;$342,000<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Charde Marshall<;/td>; 
 <;td>;Regional Director<;/td>; 
 <;td>;San Francisco<;/td>; 
 <;td>;36<;/td>; 
 <;td>;2008/10/16<;/td>; 
 <;td>;$470,600<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Haley Kennedy<;/td>; 
 <;td>;Senior Marketing Designer<;/td>; 
 <;td>;London<;/td>; 
 <;td>;43<;/td>; 
 <;td>;2012/12/18<;/td>; 
 <;td>;$313,500<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Tatyana Fitzpatrick<;/td>; 
 <;td>;Regional Director<;/td>; 
 <;td>;London<;/td>; 
 <;td>;19<;/td>; 
 <;td>;2010/03/17<;/td>; 
 <;td>;$385,750<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Michael Silva<;/td>; 
 <;td>;Marketing Designer<;/td>; 
 <;td>;London<;/td>; 
 <;td>;66<;/td>; 
 <;td>;2012/11/27<;/td>; 
 <;td>;$198,500<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Paul Byrd<;/td>; 
 <;td>;Chief Financial Officer (CFO)<;/td>; 
 <;td>;New York<;/td>; 
 <;td>;64<;/td>; 
 <;td>;2010/06/09<;/td>; 
 <;td>;$725,000<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Gloria Little<;/td>; 
 <;td>;Systems Administrator<;/td>; 
 <;td>;New York<;/td>; 
 <;td>;59<;/td>; 
 <;td>;2009/04/10<;/td>; 
 <;td>;$237,500<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Bradley Greer<;/td>; 
 <;td>;Software Engineer<;/td>; 
 <;td>;London<;/td>; 
 <;td>;41<;/td>; 
 <;td>;2012/10/13<;/td>; 
 <;td>;$132,000<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Dai Rios<;/td>; 
 <;td>;Personnel Lead<;/td>; 
 <;td>;Edinburgh<;/td>; 
 <;td>;35<;/td>; 
 <;td>;2012/09/26<;/td>; 
 <;td>;$217,500<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Jenette Caldwell<;/td>; 
 <;td>;Development Lead<;/td>; 
 <;td>;New York<;/td>; 
 <;td>;30<;/td>; 
 <;td>;2011/09/03<;/td>; 
 <;td>;$345,000<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Yuri Berry<;/td>; 
 <;td>;Chief Marketing Officer (CMO)<;/td>; 
 <;td>;New York<;/td>; 
 <;td>;40<;/td>; 
 <;td>;2009/06/25<;/td>; 
 <;td>;$675,000<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Caesar Vance<;/td>; 
 <;td>;Pre-Sales Support<;/td>; 
 <;td>;New York<;/td>; 
 <;td>;21<;/td>; 
 <;td>;2011/12/12<;/td>; 
 <;td>;$106,450<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Doris Wilder<;/td>; 
 <;td>;Sales Assistant<;/td>; 
 <;td>;Sidney<;/td>; 
 <;td>;23<;/td>; 
 <;td>;2010/09/20<;/td>; 
 <;td>;$85,600<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Angelica Ramos<;/td>; 
 <;td>;Chief Executive Officer (CEO)<;/td>; 
 <;td>;London<;/td>; 
 <;td>;47<;/td>; 
 <;td>;2009/10/09<;/td>; 
 <;td>;$1,200,000<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Gavin Joyce<;/td>; 
 <;td>;Developer<;/td>; 
 <;td>;Edinburgh<;/td>; 
 <;td>;42<;/td>; 
 <;td>;2010/12/22<;/td>; 
 <;td>;$92,575<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Jennifer Chang<;/td>; 
 <;td>;Regional Director<;/td>; 
 <;td>;Singapore<;/td>; 
 <;td>;28<;/td>; 
 <;td>;2010/11/14<;/td>; 
 <;td>;$357,650<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Brenden Wagner<;/td>; 
 <;td>;Software Engineer<;/td>; 
 <;td>;San Francisco<;/td>; 
 <;td>;28<;/td>; 
 <;td>;2011/06/07<;/td>; 
 <;td>;$206,850<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Fiona Green<;/td>; 
 <;td>;Chief Operating Officer (COO)<;/td>; 
 <;td>;San Francisco<;/td>; 
 <;td>;48<;/td>; 
 <;td>;2010/03/11<;/td>; 
 <;td>;$850,000<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Shou Itou<;/td>; 
 <;td>;Regional Marketing<;/td>; 
 <;td>;Tokyo<;/td>; 
 <;td>;20<;/td>; 
 <;td>;2011/08/14<;/td>; 
 <;td>;$163,000<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Michelle House<;/td>; 
 <;td>;Integration Specialist<;/td>; 
 <;td>;Sidney<;/td>; 
 <;td>;37<;/td>; 
 <;td>;2011/06/02<;/td>; 
 <;td>;$95,400<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Suki Burks<;/td>; 
 <;td>;Developer<;/td>; 
 <;td>;London<;/td>; 
 <;td>;53<;/td>; 
 <;td>;2009/10/22<;/td>; 
 <;td>;$114,500<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Prescott Bartlett<;/td>; 
 <;td>;Technical Author<;/td>; 
 <;td>;London<;/td>; 
 <;td>;27<;/td>; 
 <;td>;2011/05/07<;/td>; 
 <;td>;$145,000<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Gavin Cortez<;/td>; 
 <;td>;Team Leader<;/td>; 
 <;td>;San Francisco<;/td>; 
 <;td>;22<;/td>; 
 <;td>;2008/10/26<;/td>; 
 <;td>;$235,500<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Martena Mccray<;/td>; 
 <;td>;Post-Sales support<;/td>; 
 <;td>;Edinburgh<;/td>; 
 <;td>;46<;/td>; 
 <;td>;2011/03/09<;/td>; 
 <;td>;$324,050<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Unity Butler<;/td>; 
 <;td>;Marketing Designer<;/td>; 
 <;td>;San Francisco<;/td>; 
 <;td>;47<;/td>; 
 <;td>;2009/12/09<;/td>; 
 <;td>;$85,675<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Howard Hatfield<;/td>; 
 <;td>;Office Manager<;/td>; 
 <;td>;San Francisco<;/td>; 
 <;td>;51<;/td>; 
 <;td>;2008/12/16<;/td>; 
 <;td>;$164,500<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Hope Fuentes<;/td>; 
 <;td>;Secretary<;/td>; 
 <;td>;San Francisco<;/td>; 
 <;td>;41<;/td>; 
 <;td>;2010/02/12<;/td>; 
 <;td>;$109,850<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Vivian Harrell<;/td>; 
 <;td>;Financial Controller<;/td>; 
 <;td>;San Francisco<;/td>; 
 <;td>;62<;/td>; 
 <;td>;2009/02/14<;/td>; 
 <;td>;$452,500<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Timothy Mooney<;/td>; 
 <;td>;Office Manager<;/td>; 
 <;td>;London<;/td>; 
 <;td>;37<;/td>; 
 <;td>;2008/12/11<;/td>; 
 <;td>;$136,200<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Jackson Bradshaw<;/td>; 
 <;td>;Director<;/td>; 
 <;td>;New York<;/td>; 
 <;td>;65<;/td>; 
 <;td>;2008/09/26<;/td>; 
 <;td>;$645,750<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Olivia Liang<;/td>; 
 <;td>;Support Engineer<;/td>; 
 <;td>;Singapore<;/td>; 
 <;td>;64<;/td>; 
 <;td>;2011/02/03<;/td>; 
 <;td>;$234,500<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Bruno Nash<;/td>; 
 <;td>;Software Engineer<;/td>; 
 <;td>;London<;/td>; 
 <;td>;38<;/td>; 
 <;td>;2011/05/03<;/td>; 
 <;td>;$163,500<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Sakura Yamamoto<;/td>; 
 <;td>;Support Engineer<;/td>; 
 <;td>;Tokyo<;/td>; 
 <;td>;37<;/td>; 
 <;td>;2009/08/19<;/td>; 
 <;td>;$139,575<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Thor Walton<;/td>; 
 <;td>;Developer<;/td>; 
 <;td>;New York<;/td>; 
 <;td>;61<;/td>; 
 <;td>;2013/08/11<;/td>; 
 <;td>;$98,540<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Finn Camacho<;/td>; 
 <;td>;Support Engineer<;/td>; 
 <;td>;San Francisco<;/td>; 
 <;td>;47<;/td>; 
 <;td>;2009/07/07<;/td>; 
 <;td>;$87,500<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Serge Baldwin<;/td>; 
 <;td>;Data Coordinator<;/td>; 
 <;td>;Singapore<;/td>; 
 <;td>;64<;/td>; 
 <;td>;2012/04/09<;/td>; 
 <;td>;$138,575<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Zenaida Frank<;/td>; 
 <;td>;Software Engineer<;/td>; 
 <;td>;New York<;/td>; 
 <;td>;63<;/td>; 
 <;td>;2010/01/04<;/td>; 
 <;td>;$125,250<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Zorita Serrano<;/td>; 
 <;td>;Software Engineer<;/td>; 
 <;td>;San Francisco<;/td>; 
 <;td>;56<;/td>; 
 <;td>;2012/06/01<;/td>; 
 <;td>;$115,000<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Jennifer Acosta<;/td>; 
 <;td>;Junior Javascript Developer<;/td>; 
 <;td>;Edinburgh<;/td>; 
 <;td>;43<;/td>; 
 <;td>;2013/02/01<;/td>; 
 <;td>;$75,650<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Cara Stevens<;/td>; 
 <;td>;Sales Assistant<;/td>; 
 <;td>;New York<;/td>; 
 <;td>;46<;/td>; 
 <;td>;2011/12/06<;/td>; 
 <;td>;$145,600<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Hermione Butler<;/td>; 
 <;td>;Regional Director<;/td>; 
 <;td>;London<;/td>; 
 <;td>;47<;/td>; 
 <;td>;2011/03/21<;/td>; 
 <;td>;$356,250<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Lael Greer<;/td>; 
 <;td>;Systems Administrator<;/td>; 
 <;td>;London<;/td>; 
 <;td>;21<;/td>; 
 <;td>;2009/02/27<;/td>; 
 <;td>;$103,500<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Jonas Alexander<;/td>; 
 <;td>;Developer<;/td>; 
 <;td>;San Francisco<;/td>; 
 <;td>;30<;/td>; 
 <;td>;2010/07/14<;/td>; 
 <;td>;$86,500<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Shad Decker<;/td>; 
 <;td>;Regional Director<;/td>; 
 <;td>;Edinburgh<;/td>; 
 <;td>;51<;/td>; 
 <;td>;2008/11/13<;/td>; 
 <;td>;$183,000<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Michael Bruce<;/td>; 
 <;td>;Javascript Developer<;/td>; 
 <;td>;Singapore<;/td>; 
 <;td>;29<;/td>; 
 <;td>;2011/06/27<;/td>; 
 <;td>;$183,000<;/td>; 
 <;/tr>; 
 <;tr>; 
 <;td>;Donna Snider<;/td>; 
 <;td>;Customer Support<;/td>; 
 <;td>;New York<;/td>; 
 <;td>;27<;/td>; 
 <;td>;2011/01/25<;/td>; 
 <;td>;$112,000<;/td>; 
 <;/tr>; 
 <;/tbody>; 
 <;/table>;</pre>
<ul>
<li>lalu coba jalankan di browser. jika tampil seperti gambar dibawah ini, itu artinya anda telah berhasil membuat table paginate dengan bootstrap</li>
</ul>
<p><a href="http://s5.postimg.org/g9bye9xpj/Screenshot_23.png"><img class="aligncenter" src="http://s5.postimg.org/g9bye9xpj/Screenshot_23.png" alt="Cara membuat table pagination" width="467" height="303" /></a></p>
<p>Namun, jika tampilan tidak seperti gambar diatas. Coba gunakan addon firebug pada browser anda. Addon FireBug berfungsi untuk mengetahui letak kesalah script js dan juga css melalu console.</p>
<p>Install Addon Firebug:</p>
<ul>
<li><a href="https://chrome.google.com/webstore/detail/bmagokdooijbeehmkpknfglimnifench/https%3A//chrome.google.com/webstore/detail/elkkomimknapgodalnkjeddkjnjkfmfp" target="_blank">Download Untuk Chrome browser.</a></li>
<li><a href="https://addons.mozilla.org/en-US/firefox/addon/firebug/" target="_blank">Download Untuk Mozilla FireFox. </a></li>
</ul>
<h2>Lokal Installasi</h2>
<p>Untuk installasi secara offline, anda perlu mendownload terlebih dahulu package datatables dari situs resminya atau klik <a href="http://datatables.net/download/index" target="_blank">disini</a>.</p>
<ul>
<li>Setelah didownload, ekstrak folder dataTables pada direktori projek anda.</li>
<li>lalu copy dan paste kode dibawah ini diantara tag <strong><;head>; <;/head>;</strong></li>
</ul>
<pre class="lang:asp decode:true "><;!-- Bootstrap CSS -->; 
<;link rel="stylesheet" type="text/css" href="path-to/bootstrap.min.css">; 
<;!-- Bootstrap DataTables CSS -->; 
<;link rel="stylesheet" type="text/css" href="path-to/dataTables.bootstrap.css">; 
<;!-- Jquery -->; 
<;script type="text/javascript" language="javascript" src="path-to/jquery-1.10.2.min.js">;<;/script>; 
<;!-- Jquery DataTables -->; 
<;script type="text/javascript" language="javascript" src="path-to/jquery.dataTables.min.js">;<;/script>; 
<;!-- Bootstrap Javascript -->; 
<;script type="text/javascript" language="javascript" src="path-to/dataTables.bootstrap.js">;<;/script>;</pre>
[blockquote author=&#8221;&#8221;]Jangan lupa mengubah &#8220;path-to&#8221; sesuai struktur direktori anda[/blockquote]
<ul>
<li>Lalu untuk table dummy nya bisa menggunakan kode diatas untuk digunakan sebagai testing.</li>
</ul>
<p><em><strong>Catatan:</strong></em></p>
<p>pada pembuatan table pagination hanya berfungsi sebagai penampil saja. Tidak benar-benar paging seperti yang ada pada website dinamis seperti biasanya. pada website dinamis paging dilakukan tidak hanya pada front end saja tetapi pada backend juga</p>
<p><iframe width="100%" height="500" src="//jsfiddle.net/fikryans10/wt0ovdh3/embedded/result,html,js/dark/" allowfullscreen="allowfullscreen" frameborder="0"></iframe></p>
<p>Demikian tutorial <strong>Cara Membuat Table Pagination Dengan Bootstrap</strong></p>
<p> ;</p>

Cara Membuat Table Pagination Dengan Bootstrap
Recent Articles
Kumpulan DNS Gratis Tercepat!
DNS merupakan sebuah sistem yang bertugas menyimpan semua informasi data domain dalam jaringan. Dengan adanya DNS, domain atau hostname yang ada akan ditranslate dan...
Apa itu DNS ? Dan Fungsinya
Apa itu DNS? - DNS (Domain Name System) adalah sebuah sistem yang bertugas menyimpan semua informasi data domain dalam jaringan. Dengan adanya DNS, domain...
Apa itu OLT ? Serta Fungsinya Dalam Jaringan
Apa itu olt ? OLT (Optical Line Termination) adalah perangkat keras yang berfungsi sebagai titik akhir (end-point) dari layanan jaringan optik pasif (Passive Optical...
Template Voucher Untuk Mixradius
Template Voucher Untuk Mixradius - Pasti kalian bosen kan dengan template voucher default mixradius? tenang. kali ini saya akan memberikan template untuk voucher mixradius kamu agar...
Daftar Port Game Online Mikrotik Terbaru
Daftar port game online dibawah ini bisa digunakan untuk membuat rule agar koneksi ke game online tersebut bisa lancar, bisa juga untuk memisahkan antara...
