Я использую оболочку IgnitedDatatables для представления данных в виде таблицы. Из примера мне удается выполнить фильтрацию диапазона с помощью ползунка из jquery ui, однако я хотел бы выполнить фильтрацию по значению флажка, но у меня нет никакой идеи передать значение флажка на страницу обработки ajax .
Ниже приведен код для фильтра диапазона с помощью ползунка:
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>   </td>
<td width="200">                        <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. Любая помощь высоко ценится.
Спасибо!