Question

我正在使用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>&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>

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

谢谢！

Answer 1

您是否可以尝试添加一个带有my 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页面上你可以读取带有复选框值的新参数USEALL。

约万

jquery数据表复选框值

1 个答案: