如何解决使用数据表进行单列搜索 (Jquery / AJAX / PHP)
在编码方面，我绝对是新手，但我真的很喜欢学习。大约一年前，我设法为工作创建了一个时间表跟踪系统。它非常适合我们，我们只是一家小公司，我们的员工可以通过手机将数据输入到我们的数据库中。
我很想添加能够搜索每一列的功能，如下面的数据表链接所示。 https://datatables.net/examples/api/multi_filter.html
不幸的是，我已经一年多没有为这个项目编写代码了，我现在为此感到非常压力！我理解了大约 80% 的代码，并得到了其他来源的帮助来构建它，但经过 3 天的尝试，我觉得我需要帮助！
$('#timesheet_data tfoot th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
});
我已经按照 Datatables 的说明使用了以下代码，但它没有进行搜索，也没有提供任何错误或反馈。
initComplete: function () {
// Apply the search
this.api().columns().every( function () {
var that = this;
$( 'input',this.footer() ).on( 'keyup change clear',function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
}
非常感谢任何帮助，谢谢！ 下面是我的 HTML 代码，再往下是我的 PHP 代码。
<?PHP
include('database_connection.PHP');
if(!isset($_SESSION["type"]))
{
header("location:index.PHP");
}
include('header.PHP');
include('function.PHP');
?>
<html>
<head>
<Meta charset="utf-8">
<!--
<script src="https://code.jquery.com/jquery-3.5.1.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js" type="text/javascript"></script>
-->
</head>
<body>
<span id="alert_action"></span>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class="col-md-10">
<h3 class="panel-title"><b>Daily Time Sheet</b></h3>
</div>
<div class="col-md-2" align="right">
<button type="button" name="add" id="add_button" class="btn btn-success btn-sm">Add a Record</button>
</div>
</div>
</div>
<div class="panel-body">
<table id="timesheet_data" class="display responsive table table-responsive table-bordered table-striped table-hover table-condensed wrap" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>User</th>
<th>Date</th>
<th>Client</th>
<th>Description</th>
<th>Regular Hours</th>
<th>Time & Half</th>
<th>Double Time</th>
<th>Total Hours</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>User</th>
<th>Date</th>
<th>Client</th>
<th>Description</th>
<th>Regular Hours</th>
<th>Time & Half</th>
<th>Double Time</th>
<th>Total Hours</th>
<th>Edit</th>
<th>Delete</th>
<!--<th colspan="3" style="text-align:right" class="total_section">Total:</th>-->
<!--<th></th>-->
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
<div id="timesheetModal" class="modal fade">
<div class="modal-dialog">
<form method="post" id="submit_form">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><i class="fa fa-plus"></i> Add Client</h4>
</div>
<div class="modal-body">
<label>Date</label>
<input type="date" name="date" id="date" class="form-control required "/>
</div>
<div class="modal-body">
<label>Client Name</label>
<select name="client_id" id="client_id" class="form-control" required>
<option value="">Select Client</option>
<?PHP echo get_client_id($connect); ?>
</select>
</div>
<div class="modal-body">
<label>Description</label>
<select name="description" id="description" class="form-control" required >
<option value="">Select Job Description</option>
<?PHP echo get_general_duties($connect); ?>
<?PHP echo get_job_description($connect); ?>
</select>
</div>
<div class="modal-body">
<label>Regular Hours</label>
<input type="number" name="reg_hours" id="reg_hours" class="form-control" step=".01" required/>
</div>
<div class="modal-body">
<label>Time & Half</label>
<input type="text" name="over_hours" id="over_hours" class="form-control" step=".01" />
</div>
<div class="modal-body">
<label>Double Time</label>
<input type="text" name="double_hours" id="double_hours" class="form-control" step=".01" />
</div>
<div class="modal-footer">
<input type="hidden" name="id" id="id"/>
<input type="hidden" name="btn_action" id="btn_action"/>
<input type="submit" name="action" id="action" class="btn btn-info" value="Add" />
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</form>
</div>
</div>
<div class="week_period"><br>
<?PHP
$day = date('w');
$week_start = date('d-m-Y',strtotime('+'.(1-$day).' days'));
$week_end = date('d-m-Y',strtotime('+'.(8-$day).' days'));
?>
<h4>
<div class="container" id="container">
<div class="table-responsive">
<table class="table">
<div class="panel-body">
<div class="title">
<h2>Week Commencing <?PHP echo $week_start; ?></h2>
<h4>TOTAL HOURS FOR THIS WEEK</h4>
</div>
<table id="timesheet_total_hours" class="display responsive table table-responsive table-bordered table-striped table-hover table-condensed wrap" style="width:100%">
<thead>
<tr>
<th>Date</th>
<th>Hours</th>
</tr>
</thead>
<tbody>
<tr>
<?PHP
echo get_hours($connect);
?>
</tr>
</tbody>
<tfoot>
<tr>
<th>Date</th>
<th>Hours</th>
<!--<th colspan="1" style="text-align:right" class="total_section">Total:</th>-->
</tr>
</tfoot>
</table>
</div>
</div>
</div>
<?PHP
//echo get_hours($connect);
?>
</h4>
</div>
<br>
<br>
<?PHP
include('footer.PHP');
?>
<script>
$(document).ready(function(){
// Setup - add a text input to each footer cell
$('#timesheet_data tfoot th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
});
var timesheetdataTable = $('#timesheet_data.display').DataTable({
"processing":true,"serverSide":true,"responsive":true,"bFilter": true,//Enables Filtering
"bInfo": false,"bServerSide": true,"order":[],"ajax":{
url:"timesheet_fetch.PHP",type:"POST"
},dom: 'rBfltip',buttons: [
'excel','csv','pdf','copy'
],"lengthMenu": [[5,10,25,50,-1],[5,"All"]],"columnDefs":[
{ "width": "5%","targets": 0 },{ "width": "20%","targets": 1 },{ "width": "10%","targets": 2 },"targets": 3 },{ "width": "25%","targets": 4 },{ "width": "5%","targets": 5 },"targets": 6 },"targets": 7 },"targets": 8 },"targets": 9 },"targets": 10 },{
"targets":[5,6,7,8,9,10],"orderable":false,},],"pageLength": 10,/*
"initComplete": function () {
// Apply the search
this.api().columns().every( function () {
var that = this;
$( 'input',function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
});
});
}
*/
// DataTable
initComplete: function () {
// Apply the search
this.api().columns().every( function () {
var that = this;
$( 'input',function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
}
/*
"footerCallback": function ( row,data,start,end,display ) {
var api = this.api(),data;
// Remove the formatting to get integer data for summation
var intVal = function ( i ) {
return typeof i === 'string' ?
i.replace(/[\$,]/g,'')*1 :
typeof i === 'number' ?
i : 0;
};
// Total over all pages
total = api
.column( 8 )
.data()
.reduce( function (a,b) {
return intVal(a) + intVal(b);
},0 );
// Total over this page
pagetotal = api
.column( 8,{ page: 'current'} )
.data()
.reduce( function (a,0 );
// Update footer
$( api.column( 8 ).footer() ).html(
//'£'+pagetotal +' ( £'+ total +' total)' - FOR USE WHEN COUNTING MONEY
+pagetotal +' Hours'
);
} */
});
/*
// Setup - add a text input to each footer cell
$('#timesheet_data tfoot th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
// DataTable
var table = $('#timesheet_data').DataTable({
initComplete: function () {
// Apply the search
var api = this.api();
api.columns([0,1,2,3]).every(function(){
var that = this;
$( 'input',function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
});
});
}
});
*/
/*
// Setup - add a text input to each footer cell
$('#timesheet_data tfoot th').each( function () {
var title = $('#timesheet_data thead th').eq($(this).index()).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
});
dataTableInstance.columns().every(function(){
var datatableColumn = this;
$(this.footer()).find('input').on('keyup change',function(){
datatableColumn.search(this.value).draw();
});
});
*/
/*
dataTableInstance.columns().every(function(){
var datatableColumn = this;
$(this.footer()).find('input').on('keyup change',function(){
datatableColumn.search(this.value).draw();
});
});
*/
/*
$(document).on('change','#category',function(){
var category = $(this).val();
$('#timesheet_data').DataTable().destroy();
if(category != '')
{
load_data(category);
}
else
{
load_data();
}
});
*/
$('#add_button').click(function(){
$('#timesheetModal').modal('show');
$('#submit_form')[0].reset();
$('.modal-title').html("<i class='fa fa-plus'></i> Add a Record");
$('#action').val('Add');
$('#btn_action').val('Add');
});
$(document).on('submit','#submit_form',function(event){
event.preventDefault();
$('#action').attr('disabled','disabled');
var form_data = $(this).serialize();
$.ajax({
url:"timesheet_add.PHP",method:"POST",data:form_data,success:function(data)
{
$('#submit_form')[0].reset();
$('#timesheetModal').modal('hide');
$('#alert_action').fadeIn().html('<div class="alert alert-success">'+data+'</div>');
$('#action').attr('disabled',false);
timesheetdataTable.ajax.reload();
$("#container").load(location.href + " #container");
//window.location.reload();
}
})
});
$(document).on('click','.update',function(){
var id = $(this).attr("id");
var btn_action = 'fetch_single';
$.ajax({
url:"timesheet_add.PHP",data:{id:id,btn_action:btn_action},dataType:"json",success:function(data)
{
$('#timesheetModal').modal('show');
$('#date').val(data.date);
$('#client_id').val(data.client_id);
$('#description').val(data.description);
$('#reg_hours').val(data.reg_hours);
$('#over_hours').val(data.over_hours);
$('#double_hours').val(data.double_hours);
$('.modal-title').html("<i class='fa fa-pencil-square-o'></i> Edit Client");
$('#id').val(id);
$('#action').val('Edit');
$('#btn_action').val("Edit");
}
})
});
$(document).on('click','.delete',function(){
var id = $(this).attr('id');
var btn_action = 'delete';
if(confirm("Are you sure you want to delete this record?"))
{
$.ajax({
url:"timesheet_add.PHP",success:function(data)
{
$('#alert_action').fadeIn().html('<div class="alert alert-info">'+data+'</div>');
timesheetdataTable.ajax.reload();
timesheet_total_hours.ajax.reload();
}
})
}
else
{
return false;
}
});
/*
var timesheet_total_hours = $('#timesheet_total_hours.display').DataTable({
"processing":true,"bPaginate": false,"bFilter": false,"info": false,"ajax":{
url:"timesheet_total_hours.PHP","columnDefs":[
{
"targets":[0,1],"pageLength": 5,});*/
});
</script>`
----------------------------------
And my PHP Code:
<?PHP
include('database_connection.PHP');
include('function.PHP');
$query = '';
$output = array();
$column = array("timesheets.id","timesheets.user_id","timesheets.date","timesheets.description","client.client_name","user_details.user_name");
$day = date('w');
$week_start = date('Y-m-d',strtotime('+'.(1-$day).' days'));
$week_end = date('Y-m-d',strtotime('+'.(8-$day).' days'));
$today = date('d-m-Y');
//$query .= "SELECT * FROM timesheets WHERE user_id = '".$_SESSION['user_id']."' AND date > $week_start ";
//$query .= "SELECT * FROM timesheets WHERE date BETWEEN '$week_start' AND '$week_end' ";
if($_SESSION["type"] != 'master')
{
//$query .= "SELECT * FROM timesheets WHERE user_id = '".$_SESSION['user_id']."' ";
$query .= "SELECT * FROM timesheets
INNER JOIN client ON client.client_id = timesheets.client_id
INNER JOIN user_details ON user_details.user_id = timesheets.user_id
WHERE date BETWEEN '$week_start' AND '$week_end' AND timesheets.user_id = '".$_SESSION['user_id']."'
";
}
else{
$query .= "SELECT * FROM timesheets
INNER JOIN client ON client.client_id = timesheets.client_id
INNER JOIN user_details ON user_details.user_id = timesheets.user_id
WHERE id > 0
";
}
if(isset($_POST["search"]["value"]))
{
$query .= 'AND (timesheets.id LIKE "%'.$_POST["search"]["value"].'%" ';
$query .= 'OR timesheets.user_id LIKE "%'.$_POST["search"]["value"].'%" ';
$query .= 'OR timesheets.description LIKE "%'.$_POST["search"]["value"].'%" ';
$query .= 'OR client.client_name LIKE "%'.$_POST["search"]["value"].'%" ';
$query .= 'OR user_details.user_name LIKE "%'.$_POST["search"]["value"].'%" ';
$query .= 'OR timesheets.date LIKE "%'.$_POST["search"]["value"].'%") ';
}
if(isset($_POST["order"]))
{
$query .= 'ORDER BY '.$column[$_POST['order']['0']['column']].' '.$_POST['order']['0']['dir'].' ';
}
else
{
$query .= 'ORDER BY timesheets.date DESC ';
}
if($_POST["length"] != -1)
{
$query .= 'LIMIT ' . $_POST['start'] . ',' . $_POST['length'];
}
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
$data = array();
$filtered_rows = $statement->rowCount();
foreach($result as $row)
{
/*$status = '';
if($row['client_status'] == 'active')
{
$status = '<span class="label label-success">Active</span>';
}
else
{
$status = '<span class="label label-danger">Inactive</span>';
}*/
/*
if($row['user_id'] == $_SESSION['user_id'])
{
$sub_array[] = $
}
*/
$sub_array = array();
$sub_array[] = $row['id'];
//$sub_array[] = get_user_name($connect,$row["user_id"]);
$sub_array[] = $row['user_name'];
//$sub_array[] = $row['date'];
$orig_date = $row['date'];
$newDate1 = date("d-m-Y",strtotime($orig_date));
$sub_array[] = $newDate1;
//$sub_array[] = $row['client_id'];
//$sub_array[] = get_client_name($connect,$row["client_id"]);
$sub_array[] = $row['client_name'];
$sub_array[] = $row['description'];
$sub_array[] = $row['reg_hours'];
$sub_array[] = $row['over_hours'];
$sub_array[] = $row['double_hours'];
$sub_array[] = $row['reg_hours'] + $row['over_hours'] + $row['double_hours'];
$sub_array[] = '<button type="button" name="update" id="'.$row["id"].'" class="btn btn-warning btn-xs update"><span class="glyphicon glyphicon-edit"></span></button>';
//$sub_array[] = '<button type="button" name="delete" id="'.$row["id"].'" class="btn btn-danger btn-xs delete" data-status="'.$row["client_status"].'"><span class="glyphicon glyphicon-off"></span></button>';
$sub_array[] = '<button type="button" name="delete" id="'.$row["id"].'" class="btn btn-danger btn-xs delete"><span class="glyphicon glyphicon-trash"></span></button>';
$data[] = $sub_array;
}
$output = array(
"draw" => intval($_POST["draw"]),"recordsTotal" => $filtered_rows,"recordsFiltered" => get_total_all_records($connect),"data" => $data
);
function get_total_all_records($connect)
{
$statement = $connect->prepare("SELECT * FROM timesheets WHERE timesheets.user_id = '".$_SESSION['user_id']."' ");
$statement->execute();
return $statement->rowCount();
}
echo json_encode($output);
?>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
