これはdataBoxのカテゴリのテンプレートnavigation_detail.thtmlにdatatables用に記述する例です。
参考にしたページ：
http://www.datatables.net/examples/plug-ins/range_filtering.html
Price: <select type="text" id="min" name="min">
<option onchange="filterme()" value= "0" selected="selected"></option>
{!!if {group_housing_code}=='rent' !!}
<option onchange="filterme()" value= "50000"> 50000</option>
<option onchange="filterme()" value= "60000"> 60000</option>
<option onchange="filterme()" value= "70000"> 70000</option>
<option onchange="filterme()" value= "80000"> 80000</option>
<option onchange="filterme()" value= "90000"> 90000</option>
<option onchange="filterme()" value="100000">100000</option>
<option onchange="filterme()" value="110000">110000</option>
<option onchange="filterme()" value="120000">120000</option>
<option onchange="filterme()" value="130000">130000</option>
<option onchange="filterme()" value="140000">140000</option>
<option onchange="filterme()" value="150000">150000</option>
<option onchange="filterme()" value="160000">160000</option>
{!else}
<option onchange="filterme()" value="10000000">10000000</option>
<option onchange="filterme()" value="20000000">20000000</option>
<option onchange="filterme()" value="30000000">30000000</option>
<option onchange="filterme()" value="40000000">40000000</option>
<option onchange="filterme()" value="50000000">50000000</option>
{!endif}
</select> -
<select type="text" id="max" name="max">
<option onchange="filterme()" value="99999999999" selected="selected"></option>
{!!if {group_housing_code}=='rent' !!}
<option onchange="filterme()" value= "50000"> 50000</option>
<option onchange="filterme()" value= "60000"> 60000</option>
<option onchange="filterme()" value= "70000"> 70000</option>
<option onchange="filterme()" value= "80000"> 80000</option>
<option onchange="filterme()" value= "90000"> 90000</option>
<option onchange="filterme()" value="100000">100000</option>
<option onchange="filterme()" value="110000">110000</option>
<option onchange="filterme()" value="120000">120000</option>
<option onchange="filterme()" value="130000">130000</option>
<option onchange="filterme()" value="140000">140000</option>
<option onchange="filterme()" value="150000">150000</option>
<option onchange="filterme()" value="9990000">160000～</option>
{!else}
<option onchange="filterme()" value="10000000">10000000</option>
<option onchange="filterme()" value="20000000">20000000</option>
<option onchange="filterme()" value="30000000">30000000</option>
<option onchange="filterme()" value="40000000">40000000</option>
<option onchange="filterme()" value="50000000">50000000</option>
<option onchange="filterme()" value="9990000000">50000000～</option>
{!endif}
</select>
<span class="display{!!autotag databox:count category_code:1room|'.{category_code}.' mode:and !!}">
<input onchange="filterme()" type="checkbox" name="type" value="ワンルーム|１Ｋ|１ＤＫ|１ＬＤＫ|１ＳＬＤＫ">1部屋
</span>
<span class="display{!!autotag databox:count category_code:2room|'.{category_code}.' mode:and !!}">
<input onchange="filterme()" type="checkbox" name="type" value="２Ｋ|２ＤＫ|２ＬＤＫ|２ＳＬＤＫ" class="display{!!autotag databox:count category_code:2room|'.{category_code}.' mode:and !!}">2部屋
</span>
<span class="display{!!autotag databox:count category_code:3room|'.{category_code}.' mode:and !!}">
<input onchange="filterme()" type="checkbox" name="type" value="３Ｋ|３ＤＫ|３ＬＤＫ|３ＳＬＤＫ" class="display{!!autotag databox:count category_code:3room|'.{category_code}.' mode:and !!}">3部屋
</span>
<span class="display{!!autotag databox:count category_code:4room|'.{category_code}.' mode:and !!}">
<input onchange="filterme()" type="checkbox" name="type" value="４Ｋ|４ＤＫ|４ＬＤＫ|４ＳＬＤＫ" class="display{!!autotag databox:count category_code:4room|'.{category_code}.' mode:and !!}">4部屋
</span>
<span class="display{!!autotag databox:count category_code:5room|'.{category_code}.' mode:and !!}">
<input onchange="filterme()" type="checkbox" name="type" value="５Ｋ|５ＤＫ|５ＬＤＫ|５ＳＬＤＫ" class="display{!!autotag databox:count category_code:5room|'.{category_code}.' mode:and !!}">5部屋
</span>
<table id="memberlist" class="display datatables dataTable">
<thead>
<tr>
<th style="width:7%; white-space: nowrap">会員コード</th>
<th style="width:20%; white-space: nowrap">名称</th>
<th style="width:37%">住所</th>
<th style="width:11%">TEL</th>
</tr>
</thead>
<tbody>
{row_var}
</tbody>
<tfoot>
<tr>
<th style="width:7%; white-space: nowrap">会員コード</th>
<th style="width:20%; white-space: nowrap">名称</th>
<th style="width:37%">住所</th>
<th style="width:11%">TEL</th>
</tr>
</tfoot>
</table>
<div class='pagenav' {pagenavinone}>
{page_navigation}
<div class='count' style="float:left">{lang_view} [{lin}] / {cnt}</div>
</div>
<div style="clear:both"></div>
Listboxではなく、入力フォームにしたければ以下のようにします。
<input onchange="filterme()" type="text" name="min" value="">～
<input onchange="filterme()" type="text" name="max" value="">
footer.thtml:
<!-- DataTables jQuery { -->
<script type="text/javascript" language="javascript" src="{layout_url}/jquery.datatables/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="{layout_url}/jquery.datatables/js/numericComma.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready( function() {
$('#bukkendata').dataTable( {
"lengthMenu": [[-1], ["All"]],
"order": [[ 1, "desc" ]],
"columnDefs": [
{ "type": "numeric-comma", targets: 2 },
{ "type": "formatted-num", targets: 5 },
],
"bLengthChange": false,
"aoData": [
{ "sType": "html" },
{ "sType": "html" },
{ "sType": "html" },
{ "sType": "html" },
{ "sType": "html" },
{ "sType": "html" },
{ "sType": "html" },
{ "sType": "html" }
],
} );
$('#memberlist').dataTable( {
"lengthMenu": [[-1], ["All"]],
"order": [[ 0, "desc" ]],
"bLengthChange": false,
} );
} );
// Code goes here
// http://plnkr.co/edit/45hOwYG13VAooKfPPAw3?p=preview
$(function() {
otable = $('#bukkendata').dataTable();
})
function filterme() {
//build a regex filter string with an or(|) condition
var types = $('input:checkbox[name="type"]:checked').map(function() {
return '^' + this.value + '\$';
}).get().join('|');
//filter in column 0, with an regex, no smart filtering, no inputbox,not case sensitive
otable.fnFilter(types, 6, true, true, false, false);
//build a filter string with an or(|) condition
var frees = $('input:checkbox[name="free"]:checked').map(function() {
return this.value;
}).get().join('|');
//now filter in column 2, with no regex, no smart filtering, no inputbox,not case sensitive
otable.fnFilter(frees, 2, false, false, false, false);
}
$(document).ready(function() {
var table = $('#bukkendata').DataTable();
// Event listener to the two range filtering inputs to redraw on input
$('#min, #max').change( function() {
table.draw();
} );
} );
</script>
<!-- } DataTables jQuery -->
numericComma.js:
/**
* It is not uncommon for non-English speaking countries to use a comma for a
* decimal place. This sorting plug-in shows how that can be taken account of in
* sorting by adding the type `numeric-comma` to DataTables. A type detection
* plug-in for this sorting method is provided below.
*
* Please note that the 'Formatted numbers' type detection and sorting plug-ins
* offer greater flexibility that this plug-in and should be used in preference
* to this method.
*
* @name Commas for decimal place
* @summary Sort numbers correctly which use a common as the decimal place.
* @deprecated
* @author [Allan Jardine](http://sprymedia.co.uk)
*
* @example
* $('#example').dataTable( {
* columnDefs: [
* { type: 'numeric-comma', targets: 0 }
* ]
* } );
*/
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
"numeric-comma-pre": function ( a ) {
var x = (a == "-") ? 0 : a.replace( /,/, "." );
return parseFloat( x );
},
"numeric-comma-asc": function ( a, b ) {
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
},
"numeric-comma-desc": function ( a, b ) {
return ((a < b) ? 1 : ((a > b) ? -1 : 0));
}
} );
jQuery.fn.dataTableExt.oSort['formatted-num-asc'] = function(x,y) {
/* 正規表現で数値と小数点以外は削除する */
x = x.replace(/[^\d\-\.\/]/g, '');
y = y.replace(/[^\d\-\.\/]/g, '');
/* 文字列が分数の場合は除算してソートできるようにする */
if(x.indexOf('/') >= 0) x = eval(x);
if(y.indexOf('/') >= 0) y = eval(y);
return x/1 - y/1;
}
jQuery.fn.dataTableExt.oSort['formatted-num-desc'] = function(x,y) {
/* 正規表現で数値と小数点以外は削除する */
x = x.replace(/[^\d\-\.\/]/g, '');
y = y.replace(/[^\d\-\.\/]/g, '');
/* 文字列が分数の場合は除算してソートできるようにする */
if(x.indexOf('/') >= 0) x = eval(x);
if(y.indexOf('/') >= 0) y = eval(y);
return y/1 - x/1;
}
/* http://www.datatables.net/examples/plug-ins/range_filtering.html */
/* Custom filtering function which will search data in column four between two values */
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
var min = parseInt( $('#min').val(), 10 );
var max = parseInt( $('#max').val(), 10 );
var price = data[2]; // use data for the price column
price = replaceCommas(price);
if ( ( isNaN( min ) && isNaN( max ) ) ||
( isNaN( min ) && price <= max ) ||
( min <= price && isNaN( max ) ) ||
( min <= price && price <= max ) )
{
return true;
}
return false;
}
);
function replaceCommas(amount){
var amountArray = amount.split(',');
var amountWithoutCommas='';
for(var index=0;index<amountArray.length;index++){
amountWithoutCommas+=amountArray[index];
}
return parseInt(amountWithoutCommas);
}
col_detail.thtml:
<!-- plugins/databox/templates/category/default/col_detail.thtml 20101108{ -->
<td>{member}</td>
<td style="white-space: nowrap"><span style="float:left">{data_edit}</span><span style="float:left">{data_link}</span></td>
<td>〒{post}<br />{address1}{address2}{address3} {address4}</td>
<td>{member_tel}</td>
<!-- } plugins/databox/templates/category/default/col_detail.thtml -->