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 :

Source code

<!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

Source code

<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>

Source code

<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>