dataTablesを活用した物件検索

Diary
投稿者: 表示回数10,727
これは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="ワンルーム|1K|1DK|1LDK|1SLDK">1部屋
</span>
<span class="display{!!autotag databox:count category_code:2room|'.{category_code}.' mode:and !!}">
<input onchange="filterme()" type="checkbox" name="type" value="2K|2DK|2LDK|2SLDK" 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="3K|3DK|3LDK|3SLDK" 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="4K|4DK|4LDK|4SLDK" 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="5K|5DK|5LDK|5SLDK" 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 -->