2012-02-07 31 views
0

私はテーブル形式でデータを表示するためにIgnitedDatatablesラッパーを使用しています。この例では、jquery UIのスライダを使用して範囲フィルタを行うことができますが、チェックボックスの値に基づいてフィルタリングを行いたいのですが、チェックボックスの値をajaxの処理ページに渡す方法はありません。以下はjquery datatablesチェックボックスの値

スライダーを使用してレンジフィルタのコードです:

ajax.php:

`<?php` 
`require_once('Datatables.php');` 
$datatables = new Datatables('mysqli'); 

// MYSQL configuration 
$config = array(
'username' => 'root', 
'password' => 'xxxxx', 
'database' => 'mydb', 
'hostname' => 'localhost'); 

$datatables->connect($config); 

$datatables 

->select('column1,column2,column3,column4') 
->from('mytable'); 

if(isset($_POST['min_length']) && $_POST['min_length'] != '') 
$datatables->where('column1 >=', $_POST['min_length']); 

if(isset($_POST['max_length']) && $_POST['max_length'] != '') 
$datatables->where('column1 <=', $_POST['max_length']); 

echo $datatables->generate(); 
?> 

example.html:

<script type="text/javascript" charset="utf-8"> 
$(document).ready(function() 
{ 
var oTable = $('#example').dataTable 
({ 
"oLanguage" :{ "sSearch" : "Search Global:" 
}, 
    'bServerSide' : true, 
    'sAjaxSource' : 'ajax.php', 
    "bJQueryUI": true, 
    "sPaginationType": "full_numbers", 
    'fnServerData': function(sSource, aoData, fnCallback) 
    { 
     aoData.push({ "name": "min_length", "value": $("#min_length").val() }, 
        { "name": "max_length", "value": $("#max_length").val() }, 
    ); 
     $.ajax 
     ({ 
      'dataType': 'json', 
      'type' : 'POST', 
      'url'  : sSource, 
      'data' : aoData, 
      'success' : fnCallback 
     }); 
    }, 
}); 

//Slider Range for pVal 
$("#slider-range").slider({ 
    step: 0.1, 
    range: true, 
    min: -8, 
    max: 8, 
    values: [ -8, 8 ], 
    slide: function(event, ui) { 
    $("#min_length").val(ui.values[ 0 ]); 
    $("#max_length").val(ui.values[ 1 ]); 
    }, 
    stop: function(event, ui) { 
     oTable.fnDraw(); 
    } 
}); 
$("#min_length").val($("#slider-range").slider("values", 0)); 
$("#max_length").val($("#slider-range").slider("values", 1)); 

</script> 
<body id="dt_example"> 
</head> 
<div id="container"> 
<h1>RRL DGE DB - Advanced Browsing</h1> 

<table width="200" border="0" cellspacing="0" cellpadding="0" id="slider"> 
<div class="demo1"> 
<div class="demo" style='width:250px;'> 
<p> 
<tr> 
<td><label for="amount">Min:</label><input type="text" id="min_length" style="border:0; color:#f6931f; font-weight:bold" disabled=disabled/><br></td> 

<td><label for="amount">Max:</label><input type="text" id="max_length" style="border:0; color:#f6931f; font-weight:bold;" disabled=disabled/></td> 
<td>&nbsp&nbsp&nbsp</td> 
<td width="200">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<div id="slider-range"></div></td> 
</div> 
</tr> 
</p> 

</div><!-- End demo --> 
</table> 

<BR> 
<table border="0" cellpadding="4" cellspacing="0" class="display" id="example"> 
<thead> 
    <tr> 
    <th width="10%">column1</th> 
    <th width="55%">column2</th> 
    <th width="10%">column3</th> 
    <th width="10%">column4</th> 
    <th width="15%">column5</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
    <td>loading...</td> 
    </tr> 
</tbody> 

</table> 


</div> 


</body> 
</html> 

質問は私が行うことができる方法でありますスライダの代わりにチェックボックスを使用して同じ範囲のフィルタリング?私が必要とするのは、0または1の値をajax.phpに送信して、ユーザーが0または1を超える結果を持つ列を選択できるようにすることです。私は非常に新しいPHP/jquery UIです。どんな助けも高く評価されます。

ありがとうございます!

答えて

0

あなたは、ID mycheckboxにチェックボックスを追加し、fnServerDataに追加のパラメータを追加しようとすることができます - このような何か:私は、PHPのページにあなたが新しいパラメータUSEALLを読むことができるようになると思い

'fnServerData': function(sSource, aoData, fnCallback) 
    { 
    aoData.push({ "name": "min_length", "value": $("#min_length").val() }, 
        { "name": "max_length", "value": $("#max_length").val() }, 
        { "name": "USEALL", "value": $("#mycheckbox").val() }, 
); 

チェックボックスの値。

ジョバン

関連する問題