我的数据库中有一个表格,我想在中显示内容datatable
。该表有3列id, name and datecreated
。我希望用户能够通过单击delete button
每行中的来从此表中删除行,因此其图形表示如下
|name |title| date|Delete Button|
在我像这样设置内容之前datatable
,只需拉动数据库中的所有行并iterating
遍历它们,就可以在其中加载数据
<table id="example23" class="display nowrap table table-hover table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Delete</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Delete</th>
</tr>
</tfoot>
<?php foreach ($messages as $message) {?>
<tr class="info">
<td><?php echo $message['name']; ?> </td>
<td> <?php echo date('d-M-Y', strtotime($message['datecreated'])); ?></td>
<td><a href="<?php echo $_SERVER['PHP_SELF'].'?delete='.$message['id']; ?>"
<form method="get">
<button class="btn btn-success btn-rounded" type="button" type="submit" name="submit">DELETE</button>
</form>
</td>
</tr>
<?php } ?>
</table>
这很容易,但是加班时间我发现它对1000多个行不利,它的表现确实很差,所以我决定switch to server side processing
使用Ajax
发出这样的请求
('#example123').DataTable({
"bProcessing": true,
"ajax":{
url :"../public/messages",
type: "POST",
error: function(xhr, status, error) {
console.log('Error::'+xhr.responseText);
$('#loader').hide();
},
beforeSend: function(){
$('#loader').show();
},
complete: function(){
$('#loader').hide();
}
},
用我的后端设置
public function fetchMessages($draw, $start, $length, $query, $orderColumn, $orderDir){
//*getting total number records without any search
$sql = "SELECT id, name, datecreated from messages";
$stmt = $this->conn->prepare($sql);
$stmt->execute();
$stmt->store_result();
$totalData = $stmt->affected_rows;
$totalFiltered = $totalData;
//*Search
$sql = "SELECT id, name, datecreated from messages";
if(!empty($query)) {
$query = "%{$query}%";
$sql.=" WHERE name LIKE ? )";
$stmt = $this->conn->prepare($sql);
$stmt->bind_param("sss", $query, $query, $query);
}
$stmt->execute();
$stmt->store_result();
$totalFiltered = $stmt->affected_rows;
$sql.=" ORDER BY ". $orderColumn." ".$orderDir." LIMIT ".$start." ,".$length." ORDER BY e.datecreated DESC";
$stmt->execute();
$events = array();
$stmt->bind_result($id, $name, $datecreated);
while($stmt->fetch())
{
$message = array();
//$message[] = $id; Once I include id, it goes into the name column and the name goes into the datecreated column
$message[] = $name;
$message[] = $datecreated;
$messages[] = $message;
}
$json_data = array(
"draw" => intval($draw),
"recordsTotal" => intval($totalData),
"recordsFiltered" => intval($totalFiltered),
"data" => $messages
);
return $json_data;
}
这样就可以加载数据了。我的问题与第一个解决方案不同,在第一个解决方案中,我使用ID删除了该表中没有ID的内容,当我ID
在其中包含json
要替换name
和name
替换的那一刻datecreated
。我一直在寻找一种方法,可以将其包括ID
在data
尚未隐藏的地方,并使用与本官方数据表教程中所使用的类似的逻辑来获取ID并使用其删除所需的行。
好的,事实证明我是从一个非常不同的角度来看这个问题。这就是我所做的。
首先,我指定了列名,该列名columns names
应与JSON
来自数据库的列名相同。
"columns": [
{ "data": "title" },
{ "data": "location" },
{ "data": "tickettypes" },
{ "data": "eventtype" },
{ "data": "starts",
"type" : "date",
"render": function (data) {
var date = moment(data).utc().format('DD MMM, YY [at] hh:mm A');
return date;
} },
{ "data": "ends",
"type" : "date",
"render": function (data) {
var date = moment(data).utc().format('DD MMM, YY [at] hh:mm A');
return date;
} },
{ "data": "datecreated",
"type" : "date",
"render": function (data) {
var date = moment(data).utc().format('DD MMM, YY [at] hh:mm A');
return date;
}
},
{ "data": null }
],
因此,如果您注意到它们不是ID,那是因为不应存在。事实证明,一个DataTable有一个叫做特殊的对象DT_RowId
,这是其中一个可以使用自己指定的row ID
,所以我做到了,我插入我ids
喜欢
$event = array();
$event["DT_RowId"] = $id;
$event["title"] = strlen($title) > 70 ? substr($title, 0, 70)."..." : $title;
$event["location"] = strlen($address) > 70 ? substr($address, 0, 70)."..." : $address;
$event["tickettypes"] = strlen($tickettypes) > 70 ? substr($tickettypes, 0, 70)."..." : $tickettypes;
$event["eventtype"] = $eventtype;
$event["starts"] = $starts;
$event["ends"] = $ends;
$event["datecreated"] = $datecreated;
$events[] = $event;
和
$response = array(
"draw" => intval($draw),
"recordsTotal" => intval($totalData),
"recordsFiltered" => intval($totalFiltered),
"data" => $events);
$stmt->close();
至此,我已经成功插入了具有相同ID的数据,我所要做的就是使用添加到行中的按钮访问它们,所以我做到了
$('#eventTable tbody').on( 'click', '#btndelete', function () {
var data = table.row($(this).closest('tr')).data()
data['DT_RowId'];//
} );
有时候拿了我,但我再也没有比这更骄傲了。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句