Membuat Costume JqueryDataTable dengan Range Datepicker

Hai all kembali lagi bersama saya pria ganteng asli sunda, kali ini kita akan membuat Costum JqueryDataTable dengan Range Datepicker, tutorial ini melanjutkan tutorial sebelumnya dimana kali ini saya mencoba menambahkan pencarian range tanggal kedalam JqueryDataTable.

Sebelumnya kita download jquery.ui.min.css & jquery.ui.js terlebih dahulu disini . Setelah selesai download kita lihat script index yang kemarin / lihat script dibawah ini :

<!DOCTYPE html>
<html>
  <head>
    <title>Membuat Serching Sorting Pagging Mengunakan JqueryDataTables Php Bootstrap Mysqli</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
	<link href="assets/css/bootstrap.css" rel="stylesheet" media="screen">
	<link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
	<link href="assets/css/jquery.dataTables.css" rel="stylesheet" media="screen">
	<link href="assets/css/jquery.dataTables.min.css" rel="stylesheet" media="screen">
 
  </head>
 
  <body>
 
 <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="http://andeznet.com">AndezNet</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
            </ul>
			<ul class="nav">
              <li class="active"><a href="datatablecostume.php">DataTableCostume</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div> 
  </div>
  	<div class="row-fluid">
			<div class="span12">
			  <div class="row-fluid">
				<div class="alert alert-info">
 
				  <p>&copy; <a href="http://andeznet.com">www.andeznet.com</a>&nbsp<?php echo date("Y");?>
				</div><!--/span-->
			  </div><!--/row-->
			</div><!--/span-->
	</div><!--/row-->
 
 <div class="container">
<div class="table-responsive">
 <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
				<thead>
					<tr>
						<th>Noreg</th>
						<th>Nama</th>
						<th>Tempat Lahir</th>
						<th>Tanggal Lahir</th>
						<th>Tanggal Daftar</th>
 
					</tr>
				</thead>
 
 
				<tbody>
				<?php
				include "koneksi.php";
				$view=mysqli_query($db,"select * from master");
				$no=0;
				while($row=mysqli_fetch_array($view)){
				?>
					<tr>
						<td><?php echo $row['10'];?></td>
						<td><?php echo $row['1'];?></td>
						<td><?php echo $row['4'];?></td>
						<td><?php echo $row['5'];?></td>
						<td><?php echo $row['8'];?></td>
 
					</tr>
				<?php
				}
				?>
				</tbody>
 
 </table>
</div>
</div>
 
 
 
	<div class="row-fluid">
			<div class="span12">
			  <div class="row-fluid">
				<div class="alert alert-info">
					<a name="contact"></a>
				  <h2>www.andeznet.com</h2>
				  <p class="text-info">Gudang Teknologi & Informasi</p>
				  <p>&copy; <a href="http://andeznet.com">www.andeznet.com</a>&nbsp<?php echo date("Y");?></p>
				</div><!--/span-->
			  </div><!--/row-->
			</div><!--/span-->
	</div><!--/row-->	
 
 
	 <script src="assets/js/jquery.js"></script>
	  <script src="assets/js/jquery.dataTables.js"></script>
	  <script src="assets/js/jquery.dataTables.min.js"></script>
 
	  <script>
	  $(document).ready(function() {
    $('#example').DataTable();
} );
	  </script>
 
  </body>
</html>

Kita tambahkan jquery.ui.min.css yang telah kita download sebelum script </head> kedalam script index.php seperti ini

<link href="assets/css/bootstrap.css" rel="stylesheet" media="screen">
	<link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
	<link href="assets/css/jquery.dataTables.css" rel="stylesheet" media="screen">
	<link href="assets/css/jquery.dataTables.min.css" rel="stylesheet" media="screen">
	<link href="assets/css/jquery-ui.min.css" rel="stylesheet" media="screen">

Jika Sudah kita tambakan script seperti dibawah ini ke dalam script index.php sebelum </body>

<script src="assets/js/jquery-ui.js" type="text/javascript"></script>
 
        <script src="assets/js/jquery.dataTables.columnFilter.js" type="text/javascript"></script>
 
		<script type="text/javascript">
$(document).ready(function(){
                $.datepicker.regional[""].dateFormat = 'yy-mm-dd';
                $.datepicker.setDefaults($.datepicker.regional['']);
     $('#example').dataTable({
		"aoColumns": [ 
			{ "sWidth": "10px" },
			null,
			null
		]
	} )
		  .columnFilter({ sPlaceHolder: "head:before",
			aoColumns: [ { type: "text" },
				     { type: "date-range", sRangeFormat: "Between {from} and {to} dates" },
                                     { type: "date-range", sRangeFormat: "Between {from} and {to}"  }
				]
 
		});
});
 
		</script>
        <script type="text/javascript">
 
            var _gaq = _gaq || [];
            _gaq.push(['_setAccount', 'UA-17838786-4']);
            _gaq.push(['_trackPageview']);
 
            (function () {
                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
                ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
            })();
 
</script>

Selanjutnya kita jalankan di localhost, apabila sudah benar maka akan muncul seperti gambar dibawah ini :

jquerydatatable

 

Ok sekian Tutorial dari saya boga bermanfaat, untuk sourcode lengkap nya bisa anda download disini DOWNLOAD

Happy Coding & Programing

You may also like...

6 Responses

  1. Wah bagus mas, saya tertarik untuk mengikuti tutorial yang mas buat ini.
    Izin download ya mas. 🙂 Thanks.

    Eh iya mas, boleh kah saya memberikan masukkan terhadap website mas ini. Jadi gini mas, alangkah lebih bagusnya kalau blog mas ini ditambahin fasilitas download PDF dari tutorial yang sedang mas buat seperti yang ada pada webnya jagocoding. 🙂 Jadi kami yang sedang tidak punya kuota bisa buka by PDF yang berisi tutorialnya mas.

    Terima kasih sekali lagi mas.

  2. waskito mustaqim says:

    Terima kasih tutorialnya mas, sangat membantu.

  3. thanks mas,.. lagi belajar jquery nih.. kalo ada tutor yang jquery append dong mas or bisa menambhkan data field otomatis..

Leave a Reply

Your email address will not be published. Required fields are marked *

Hubungi Saya