Biasanya saya menggunakan jquery datatable untuk paging dan filter data.
Kali ini saya akan share bagaimana caranya data yang di tampilkan di table bisa di filter, print dan hide kolom.
Berikut ini syntaxnya.
_________________________________________________________________________________
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Jquery Table</title>
<!-- jQuery -->
<script src="js/jquery-latest.min.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="js/jquery.tablesorter.js"></script>
<script src="js/jquery.tablesorter.widgets.js"></script>
<script src="js/widgets/widget-columnSelector.js"></script>
<script src="js/widgets/widget-print.js"></script>
<style>
.options th.narrow {
width: 150px;
}
.columnSelectorWrapper {
position: relative;
padding: 1px 6px;
display: inline-block;
}
.columnSelector, .hidden {
display: none;
}
#colSelect1:checked + label {
color: #307ac5;
}
#colSelect1:checked ~ #columnSelector {
display: block;
}
.columnSelector {
width: 120px;
position: absolute;
top: 30px;
padding: 10px;
background: #fff;
border: #99bfe6 1px solid;
border-radius: 5px;
}
.columnSelector label {
display: block;
text-align: left;
}
.columnSelector label:nth-child(1) {
border-bottom: #99bfe6 solid 1px;
margin-bottom: 5px;
}
.columnSelector input {
margin-right: 5px;
}
.columnSelector .disabled {
color: #ddd;
}
</style>
</head>
<body>
<button type="button" class="print">Print</button>
<button class="columnSelectorWrapper">
<input id="colSelect1" type="checkbox" class="hidden">
<label class="columnSelectorButton" for="colSelect1">Column</label>
<div id="columnSelector" class="columnSelector">
<!-- this div is where the column selector is added -->
</div>
</button>
<table class="tablesorter">
<thead>
<tr>
<th class="filter-select" data-placeholder="Select a name" data-priority="2" data-name="First">First Name</th>
<th data-placeholder="Exact matches only" data-priority="critical">Last Name</th>
<th data-placeholder="Choose a city" data-priority="4">City</th>
<th data-placeholder="Enter an age" data-priority="3">Age</th>
<th data-placeholder="Select a filter">Total</th>
<th class="filter-select">Discount</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr><td>Aaron</td><td>Johnson Sr</td><td>Atlanta</td><td>35</td><td>$5.95</td><td>22%</td><td>Jun 26, 2004 7:22 AM</td></tr>
<tr><td>Aaron</td><td>Johnson</td><td>Yuma</td><td>12</td><td>$2.99</td><td>5%</td><td>Aug 21, 2009 12:21 PM</td></tr>
<tr><td>Clark</td><td>Henry Jr</td><td>Tampa</td><td>51</td><td>$42.29</td><td>18%</td><td>Oct 13, 2000 1:15 PM</td></tr>
<tr><td>Denni</td><td>Henry</td><td>New York</td><td>28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2006 8:14 AM</td></tr>
<tr><td>John</td><td>Hood</td><td>Boston</td><td>33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr>
<tr><td>Clark</td><td>Kent Sr</td><td>Los Angeles</td><td>18</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>
<tr><td>Peter</td><td>Kent Esq</td><td>Seattle</td><td>45</td><td>$153.19</td><td>44%</td><td>Jan 18, 2021 9:12 AM</td></tr>
<tr><td>Peter</td><td>Johns</td><td>Milwaukee</td><td>13</td><td>$5.29</td><td>4%</td><td>Jan 8, 2012 5:11 PM</td></tr>
<tr><td>Aaron</td><td>Evan</td><td>Chicago</td><td>24</td><td>$14.19</td><td>14%</td><td>Jan 14, 2004 11:23 AM</td></tr>
<tr><td>Bruce</td><td>Evans</td><td>Upland</td><td>22</td><td>$13.19</td><td>11%</td><td>Jan 18, 2007 9:12 AM</td></tr>
<tr><td>Clark</td><td>McMasters</td><td>Pheonix</td><td>18</td><td>$55.20</td><td>15%</td><td>Feb 12, 2010 7:23 PM</td></tr>
<tr><td>Dennis</td><td>Masters</td><td>Indianapolis</td><td>65</td><td>$123.00</td><td>32%</td><td>Jan 20, 2001 1:12 PM</td></tr>
<tr><td>John</td><td>Hood</td><td>Fort Worth</td><td>25</td><td>$22.09</td><td>17%</td><td>Jun 11, 2011 10:55 AM</td></tr>
</tbody>
</table>
<script>
$(function() {
$(".tablesorter").tablesorter({
theme: 'blue',
widgets: ["zebra", "filter", "print", "columnSelector"],
widgetOptions : {
columnSelector_container : $('#columnSelector'),
columnSelector_name : 'data-name',
print_title : '', // this option > caption > table id > "table"
print_dataAttrib : 'data-name', // header attrib containing modified header name
print_rows : 'f', // (a)ll, (v)isible or (f)iltered
print_columns : 's', // (a)ll, (v)isible or (s)elected (columnSelector widget)
print_extraCSS : '', // add any extra css definitions for the popup window here
print_styleSheet : '../css/theme.blue.css', // add the url of your print stylesheet
// callback executed when processing completes - default setting is null
print_callback : function(config, $table, printStyle){
// do something to the $table (jQuery object of table wrapped in a div)
// or add to the printStyle string, then...
// print the table using the following code
$.tablesorter.printTable.printOutput( config, $table.html(), printStyle );
}
}
});
$('.print').click(function(){
$('.tablesorter').trigger('printTable');
});
});
</script>
</body>
</html>
Semoga bermanfaat.
Cara buat filter, print dan hide kolom di table
![Cara buat filter, print dan hide kolom di table]()
Reviewed by Syawaluddin Amin, S.Kom
on
Juli 10, 2014
Rating:
![Cara mengatasi error microsoft excel style 'comma [0]' not found](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOFi0vZX0Si_GfPTRMx9sV-xbrBAfxPv3hwRBnI_wXXHpVWuLXE-OEbztMvyCJDcn1Lt9iCfluqm2_q_cviCxFKjHMj6DgyTzYgzF5pFB_McNqh-vQuKZAVenkPpYa23kOvNlivVY7LjgU/s72-w618-c-h323/Screenshot_0.png "Cara mengatasi error microsoft excel style 'comma [0]' not found")
Tidak ada komentar: