Question

如何根据过滤结果重新绘制数据表。我通过其ID.branch id作为出价使用Out Drop Down Search，将oid作为用户使用oid，将用户ID作为uid。这是我的代码。我只有索引：未定义绘制，后跟数组结果。

  <label>Branch</label>
  <select id="branch" class="form-control">
  <option value="">Select Branch</option>
  <option value="1'">First Branch</option>
  <option value="2'">Second Branch</option>
  <option value="3'">Third Branch</option>
  </select>
  <!----Table Item Data------>
  <br/>
    <div class="container box" style="width:100%;">
        <div class="table-responsive">      
            <table id="itemdata" class="table table-bordered table-striped" 
 width="100%">
                <thead>
                    <tr>
                    <th width="10%">Branch</td>
                    <th width="10%">Outlet</td>
                    <th width="15%">User</td>
                    <th width="15%">Item</td>
                    <th width="10%">Brand</td>
                    <th width="10%">Serial No.</td>
                    <th width="10%">Purchase Date</td>
                    <th width="20%">Remarks</td>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                    <th>Branch</td>
                    <th>Outlet</td>
                    <th>User</td>
                    <th>Item</td>
                    <th>Brand</td>
                    <th>Serial No.</td>
                    <th>Purchase Date</td>
                    <th>Remarks</td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>

 <script>
$(document).ready(function () {
var dataTable = $('#itemdata').DataTable({
    "dom": '<"#buttons">lrti<"clear">',
    "bFilter": true,
    "bInfo": false,
    "scrollY":        "50%",
    "footer": true,
    "header": true,
    "scrollCollapse": true,
    "processing":true,
    "serverSide":true,
    "paging": false,
    "order":[],
    "ajax":{
        url:"include/fetch_data.php",
        type:"POST"
    },
    "columnDefs":[
        {
            "targets":[0,1,2,3,4,5,6,7],
            "orderable":false,
        },
    ],
});

//Filter Data Table By Branch   
$('#branch').on('change',function(){
    var branch = $(this).val();
    if(branch){
        var request = $.ajax({
            type:'POST',
            url:'include/fetch_data.php',
            data:'bid='+branch,
            success:function(data){
                dataTable.ajax.reload();
            }
        });
        request.done(function(msg){
            console.log(msg);
        });
        request.fail(function(jqXHR, textStatus){
            console.log("Request failed:" + textStatus)
        });
    }else{
        //Do Something 
    }
}); 
});

<?php
include ('db.php');
$query = '';
$output = array();
$query .= "SELECT branch.branch, outlet.outlet, itemuser.itemuser, 
items.item, items.brand, items.serialno, items.pdate, items.remarks FROM 
((items INNER JOIN itemuser ON items.uid = itemuser.uid)
           INNER JOIN outlet ON itemuser.oid = outlet.oid)
           INNER JOIN branch ON branch.bid = outlet.bid
           ";
$data = array();
if(isset($_POST["bid"])){

$query .= ' WHERE branch.bid = "'.$_POST["bid"].'" ORDER by outlet.oid, 
items.uid DESC '; 
}
else
{
$query .= ' ORDER by outlet.oid, items.uid DESC ';
}
$statement = $connection->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
$data = array();
$filtered_rows = $statement->rowCount();
foreach($result as $row)
{
$sub_array = array();
$sub_array[] = $row["branch"];
$sub_array[] = $row["outlet"];
$sub_array[] = $row["itemuser"];
$sub_array[] = $row["item"];
$sub_array[] = $row["brand"];
$sub_array[] = $row["serialno"];
$sub_array[] = $row["pdate"];
$sub_array[] = $row["remarks"];
$data[] = $sub_array;
}
$output = array(
"draw"              =>  intval($_POST["draw"]),
"data"              =>  $data
);
echo json_encode($output);
/* Insert Function */
?>

如何通过ajax结果根据发布请求重绘我的数据表...它没有释放我的数据表

Answer 1

您可能正在寻找dataTable.ajax.reload()方法： https://datatables.net/reference/api/ajax.reload()

Answer 2

我终于找到了解决方案。这是我的代码

<script type="text/javascript" language="javascript" >
$(document).ready(function(){
event.preventDefault();
load_data_branch();
///Filter Data Query By Branch
function load_data_branch (is_branch)
{
var dataTable = $('#inventory_data').DataTable({
"retrieve": true,
"deferRender": true,
"aLengthMenu": [[10, 50, 100, 250, 500, 1000, -1], [10, 50, 100, 250, 500, 1000, 
"All"]],
"dom": "<'row'<'col-md-6'l><'col-md-6'p>>" + "<'row'<'col-md-6'><'col-md-6'>>" + " 
<'row'<'col-md-12't>><'row'<'col-md-12'i>>",
"bFilter": false,
"buttons": [
        'copy', 'csv', 'excel', 'pdf', 'print'
    ],
"bInfo": true,
///"scrollY":        "50%",
"footer": true,
"header": true,
"scrollCollapse": true,
"bProcessing":true,
"serverSide":true,
"paging": true,
"order":[],
"ajax":{
url:"include/fetch_data_inventory.php",
type:"POST",
data:{is_branch:is_branch}
 },
 "columnDefs":[
 {
 "targets":[0,1,2,3,4,5,6,7],
 "orderable":false,
 },
 ],
});
 }
 ///Filter data Query By Outlet
 function load_data_outlet (is_outlet)
 {
 var dataTable = $('#inventory_data').DataTable({
"distroy":true,
"deferRender": true,
"aLengthMenu": [[10, 50, 100, 250, 500, 1000, -1], [10, 50, 100, 250, 500, 1000, 
 "All"]],
"dom": "<'row'<'col-md-6'l><'col-md-6'p>>" + "<'row'<'col-md-6'><'col-md-6'>>" + " 
<'row'<'col-md-12't>><'row'<'col-md-12'i>>",
"bFilter": false,
"buttons": [
        'copy', 'csv', 'excel', 'pdf', 'print'
    ],
"bInfo": true,
///"scrollY":        "50%",
"footer": true,
"header": true,
"scrollCollapse": true,
"bProcessing":true,
"serverSide":true,
"paging": true,
"order":[],
"ajax":{
url:"include/fetch_data_inventory.php",
type:"POST",
data:{is_outlet:is_outlet}
},
"columnDefs":[
{
 "targets":[0,1,2,3,4,5,6,7],
 "orderable":false,
},
],
});
}
///Filter By Data Query By User
function load_data_itemuser (is_itemuser)
{
var dataTable = $('#inventory_data').DataTable({
"distroy":true,
"deferRender": true,
"aLengthMenu": [[50, 100, 250, 500, 1000, -1], [50, 100, 250, 500, 1000, "All"]],
"dom": "<'row'<'col-md-6'l><'col-md-6'p>>" + "<'row'<'col-md-6'><'col-md-6'>>" + " 
<'row'<'col-md-12't>><'row'<'col-md-12'i>>",
"bFilter": false,
"buttons": [
        'copy', 'csv', 'excel', 'pdf', 'print'
    ],
"bInfo": true,
///"scrollY":        "50%",
"footer": true,
"header": true,
"scrollCollapse": true,
"bProcessing":true,
"serverSide":true,
"paging": true,
"order":[],
"ajax":{
url:"include/fetch_data_inventory.php",
type:"POST",
data:{is_itemuser:is_itemuser}
},
"columnDefs":[
{
 "targets":[0,1,2,3,4,5,6,7],
 "orderable":false,
},
],
});
}
///Filter By Branch
$(document).on('change', '#branch', function(){
var branch = $(this).val();
$('#inventory_data').DataTable().destroy();
if(branch != '')
{
load_data_branch(branch);
}
else
{
load_data_branch();
}
});
///Filter By Outlet
$(document).on('change', '#outlet', function(){
var outlet = $(this).val();
$('#inventory_data').DataTable().destroy();
if(outlet != '')
{
 load_data_outlet(outlet);
 }
else
{
load_data_outlet();
}
});
///Filter By Outlet
$(document).on('change', '#itemuser', function(){
var itemuser = $(this).val();
$('#inventory_data').DataTable().destroy();
if(itemuser != '')
{
load_data_itemuser(itemuser);
}
else
{
load_data_itemuser();
}
});

那是我的索引，提取

<?php
 include ('db.php');
$query = '';
$column = array("branch.branch", "outlet.outlet", "itemuser.itemuser", "items.item", 
"items.brand", "items.serialno", "items.pdate", "items.remarks");
$query .= "SELECT branch.branch, outlet.outlet, itemuser.itemuser, items.item, 
items.brand, items.serialno, items.pdate, items.remarks FROM ((items INNER JOIN 
itemuser 
ON items.uid = itemuser.uid)
           INNER JOIN outlet ON itemuser.oid = outlet.oid)
           INNER JOIN branch ON branch.bid = outlet.bid
           ";
$output = array();

if(isset($_POST["is_branch"])){
$query .= ' WHERE branch.bid = "'.$_POST["is_branch"].'" ORDER by outlet.oid, 
items.uid DESC '; 
}

else if(isset($_POST["is_outlet"])){
$query .= ' WHERE outlet.oid = "'.$_POST["is_outlet"].'" ORDER by outlet.oid, 
items.uid DESC '; 
}


else if(isset($_POST["is_itemuser"])){
$query .= ' WHERE itemuser.uid = "'.$_POST["is_itemuser"].'" ORDER by items.iid DESC 
'; 
}

else
{
$query .= ' ORDER by outlet.oid, items.uid DESC ';
}
function get_total_all_records()
{
include('db.php');
 global $query;
 $statement = $connection->prepare($query);
 $statement->execute();
$result = $statement->fetchAll();
 return $statement->rowCount();
 }
 /*Limit Data to dataTable*/
$query1 ='';
if($_POST["length"] != -1)
{
$query1 .= ' LIMIT ' . $_POST['start'] . ', ' . $_POST['length'];
}
$statement = $connection->prepare($query . $query1);
$statement->execute();
$result = $statement->fetchAll();
$data = array();
$filtered_rows = $statement->rowCount();
foreach($result as $row)
{
$sub_array = array();
$sub_array[] = $row["branch"];
$sub_array[] = $row["outlet"];
$sub_array[] = $row["itemuser"];
$sub_array[] = $row["item"];
$sub_array[] = $row["brand"];
$sub_array[] = $row["serialno"];
$sub_array[] = $row["pdate"];
$sub_array[] = $row["remarks"];
$data[] = $sub_array;
}
$output = array(
"draw"              =>  intval($_POST["draw"]),
"recordsFiltered"   =>  get_total_all_records(),
"recordsTotal"      =>  $filtered_rows,
"data"              =>  $data
);

echo json_encode($output);
/* Insert Function */
?>

PHP PDO使用下拉列表过滤数据

2 个答案: