如何根据过滤结果重新绘制数据表。 我通过其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结果根据发布请求重绘我的数据表...它没有释放我的数据表
答案 0 :(得分:0)
您可能正在寻找dataTable.ajax.reload()
方法:
https://datatables.net/reference/api/ajax.reload()
答案 1 :(得分:0)
我终于找到了解决方案。这是我的代码
<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 */
?>