jquery数据表复选框值_Jquery_Checkbox_Datatables

jquery数据表复选框值

jquery checkbox datatables

jquery数据表复选框值,jquery,checkbox,datatables,Jquery,Checkbox,Datatables,我正在使用IgnitedDataables包装器以表格形式呈现数据。在这个示例中，我使用jqueryui中的滑块进行了范围过滤，但是我希望根据复选框值进行过滤，但是我不知道如何将复选框值传递到ajax处理页面下面是使用滑块的范围过滤器的代码： ajax.php： `<?php` `require_once('Datatables.php');` $datatables = new Datatables('mysqli'); // MYSQL configuration $config

我正在使用IgnitedDataables包装器以表格形式呈现数据。在这个示例中，我使用jqueryui中的滑块进行了范围过滤，但是我希望根据复选框值进行过滤，但是我不知道如何将复选框值传递到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>&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>


$（文档）.ready（函数（）
{
var oTable=$（“#示例”）.dataTable
({
“oLanguage:{”sSearch:“搜索全局：”
},
“bServerSide”：true，
'sAjaxSource'：'ajax.php'，
“bJQueryUI”：没错，
“sPaginationType”：“完整编号”，
“fnServerData”：函数（sSource、aoData、fnServerData回调）
{
push（{“name”：“min_length”，“value”：$（“#min_length”）.val（）}，
{“name”：“max_length”，“value”：$（“#max_length”）.val（），
);
$.ajax
({
“数据类型”：“json”，
'type'：'POST'，
“url”：sSource，
“数据”：aoData，
“成功”：fn回调
}); 
},
});
//pVal的滑块范围
$（“#滑块范围”）。滑块({
步骤：0.1，
范围：对，
最小：-8，
最高：8，
值：[-8,8]，
幻灯片：功能（事件、用户界面）{
$（“#最小长度”）.val（ui.values[0]）；
$（“#max#u length”）.val（ui.values[1]）；
},
停止：函数（事件，ui）{
oTable.fnDraw（）；
}   
});
$（“最小长度”）.val（$（“滑块范围”）.slider（“值”，0））；
$（“最大长度”）.val（$（“滑块范围”）.slider（“值”，1））；
RRL DGE DB-高级浏览

最小值：

最大值：
 
          



专栏1
专栏2
第3栏
专栏4
专栏5
加载。。。

问题是如何使用复选框而不是滑块进行相同的范围过滤？我需要的是将0或1值发送到ajax.php，以便允许用户选择结果为0或1以上的列。我是非常新的php/jquery ui。非常感谢您的帮助

谢谢！

您是否可以尝试添加一个id为mycheckbox的复选框，并在fnServerData中添加其他参数-类似以下内容：

'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() },
  );

我认为在php页面上，您将能够读取值为checkbox的新参数USEALL

乔万