我是Jquery的新手我希望一旦用户删除表的项目(行),点击“Supprimer”按钮我会在数据库中删除它,表格会自动重新加载,而不会删除此行。为此,我将jQuery与DataTables一起使用:
一旦我点击“Ajouter”,它会发生什么,但它会显示我的警告:
DataTables警告:table id = tablebqup - 无效的JSON响应。有关此错误的详细信息,请参阅http://datatables.net/tn/1
我检查了我的数据库它已被删除但是表格无法加载。
我检查了控制台,发现:
Uncaught TypeError: Cannot set property 'data' of null
at sa (datatables.min.js:48)
at Sb (datatables.min.js:119)
at s.<anonymous> (datatables.min.js:120)
at s.iterator (datatables.min.js:111)
at s.<anonymous> (datatables.min.js:120)
at Object.reload (datatables.min.js:114)
at Object.success (updtbq.js:69)
at i (jquery-3.2.1.min.js:2)
at Object.fireWith [as resolveWith] (jquery-3.2.1.min.js:2)
at A (jquery-3.2.1.min.js:4)
sa @ datatables.min.js:48
Sb @ datatables.min.js:119
(anonymous) @ datatables.min.js:120
iterator @ datatables.min.js:111
(anonymous) @ datatables.min.js:120
(anonymous) @ datatables.min.js:114
(anonymous) @ updtbq.js:69
i @ jquery-3.2.1.min.js:2
fireWith @ jquery-3.2.1.min.js:2
A @ jquery-3.2.1.min.js:4
(anonymous) @ jquery-3.2.1.min.js:4
XMLHttpRequest.send (async)
send @ jquery-3.2.1.min.js:4
ajax @ jquery-3.2.1.min.js:4
r.(anonymous function) @ jquery-3.2.1.min.js:4
(anonymous) @ updtbq.js:58
dispatch @ jquery-3.2.1.min.js:3
q.handle @ jquery-3.2.1.min.js:3
我搜索了错误,我发现DataTables默认情况下,期望加载的数据是有效的JSON我已经对我的代码做了一些修改但是我没能修复错误。 请帮助一些人。
这是我的php文件:
<?php
require_once("C:/wamp/www/Mini_Prj/controllers/mainController.php");
$bnqs=MainController::getBanque();
echo'
<thead>
<tr>
<th style="display:none;">Id Banque</th>
<th>Nom de la banque</th>
<th>Abrev </th>
<th>Siège Sociale</th>
<th>Tel</th>
<th>Fax</th>
<th>Modifier</th>
<th>Supprimer</th>
</tr>
</thead>
<tbody>
<form method="post">
';
$i=0;
foreach ($bnqs as $bnq) {
if($bnq['supr']!=1)
{
echo
" <tr>
<td style='display:none;'>".$bnq['idbc']."</td>
<td contenteditable='true'>".$bnq['nomb']."</td>
<td contenteditable='true'>".$bnq['abrvb']."</td>
<td contenteditable='true'>".$bnq['sigsocial']."</td>
<td contenteditable='true'>".$bnq['tel']."</td>
<td contenteditable='true'>".$bnq['fax']."</td>
<td> <button id='modif$i' class='btn btn-info modif' name='button'>Modifier</button> </td>
<td> <button id='supp$i' class='btn btn-info supp' name='button'>Supprimer</button> </td>
</tr>";
$i++;
}
}
echo'
</form>
</tbody>
';
这是我的jS文件:
var basUrl="http://localhost/Mini_Prj/";
$(document).ready(function(e){
$('#tablebqup').dataTable();
....
$(".supp").click(function () {
$choix=confirm("voulez vous vraiment sauvegarder les modifications");
if ($choix)
{
var id=($(this).parent().parent().find('td:eq(0)').html());// the value in the 1st column.
var nombc=($(this).parent().parent().find('td:eq(1)').html());
var abrv= ($(this).parent().parent().find('td:eq(2)').html());
var sigsoc=($(this).parent().parent().find('td:eq(3)').html());
var telf=($(this).parent().parent().find('td:eq(4)').html());
var fx=($(this).parent().parent().find('td:eq(5)').html());
console.log(id);
$.post(basUrl+'views/component/updtbq.php',
{
action:'sup_bq',
idbc:id,
nomb:nombc,
abrvb:abrv,
sigsocial:sigsoc,
tel:telf,
fax:fx,
}, function(data) {
$("#tablebqup").DataTable().ajax.reload();//Here is my problem
});
}
});
...
这是生成的Html:
<div class="updBanque">
<div>
<h3> Mise a jours des banques</h3>
<div >
<div class="table-responsive">
<table id="tablebqup" class="tableau table table-fixed table-bordered table-dark table-hover ">
<?php include './component/tbbanqueupd.php';
?>
</table>
<form method="post">
<button type="button" class="btn btn-info" name="button" id="newbq" >Nouvelle banque</button>
</form>
</div>
</div>
</div>
</div>
以下是回复:
<thead>
<tr>
<th style="display:none;">Id Banque</th>
<th>Nom de la banque</th>
<th>Abrev </th>
<th>Siège Sociale</th>
<th>Tel</th>
<th>Fax</th>
<th>Modifier</th>
<th>Supprimer</th>
</tr>
</thead>
<tbody>
<form method="post">
<tr>
<td style='display:none;'>4</td>
<td contenteditable='true'>BANQUE DE DÉVELOPPEMENT LOCAL</td>
<td contenteditable='true'>BDL</td>
<td contenteditable='true'>5, rue Gaci Amar, Staoueli, Alger</td>
<td contenteditable='true'>021 39 34 83– 033 52 15</td>
<td contenteditable='true'>021 39 37 53</td>
<td> <button id='modif0' class='btn btn-info modif' name='button'>Modifier</button> </td>
<td> <button id='supp0' class='btn btn-info supp' name='button'>Supprimer</button> </td>
</tr> <tr>
<td style='display:none;'>2</td>
<td contenteditable='true'>BANQUE DE L’AGRICULTURE ET
DU DÉVELOPPEMENT RURAL</td>
<td contenteditable='true'>BADR</td>
<td contenteditable='true'>17, Boulevard Colonel Amirouche, Alger</td>
<td contenteditable='true'>021 64 24 77– 63 38 78</td>
<td contenteditable='true'>021 63 51 46 / 64 34 44</td>
<td> <button id='modif1' class='btn btn-info modif' name='button'>Modifier</button> </td>
<td> <button id='supp1' class='btn btn-info supp' name='button'>Supprimer</button> </td>
</tr> <tr>
<td style='display:none;'>1</td>
<td contenteditable='true'>BANQUE EXTÉRIEURE D’ALGÉRIE</td>
<td contenteditable='true'>BEA</td>
<td contenteditable='true'>48, Rue des Frères Bouadou,
Bir Mourad Raïs – Alger</td>
<td contenteditable='true'>023 83 54 79</td>
<td contenteditable='true'>021 56 30 50 / 056 51 56</td>
<td> <button id='modif2' class='btn btn-info modif' name='button'>Modifier</button> </td>
<td> <button id='supp2' class='btn btn-info supp' name='button'>Supprimer</button> </td>
</tr> <tr>
<td style='display:none;'>3</td>
<td contenteditable='true'>BANQUE NATIONALE D’ALGÉRIE</td>
<td contenteditable='true'>BNA</td>
<td contenteditable='true'>Siège Social : 8, Boulevard Ernesto Che Guevara, Alger</td>
<td contenteditable='true'> 021 43 99 98</td>
<td contenteditable='true'> 021 43 94 94</td>
<td> <button id='modif3' class='btn btn-info modif' name='button'>Modifier</button> </td>
<td> <button id='supp3' class='btn btn-info supp' name='button'>Supprimer</button> </td>
</tr> <tr>
<td style='display:none;'>11</td>
<td contenteditable='true'>CAISSE D’ÉPARGNE ET DE PRÉVOYANCE</td>
<td contenteditable='true'>CNEP BANQUE</td>
<td contenteditable='true'>Lot n°2 Garidi, Kouba – Alger</td>
<td contenteditable='true'>0556 64 36 99</td>
<td contenteditable='true'>021 91 64 57 et 58</td>
<td> <button id='modif4' class='btn btn-info modif' name='button'>Modifier</button> </td>
<td> <button id='supp4' class='btn btn-info supp' name='button'>Supprimer</button> </td>
</tr> <tr>
<td style='display:none;'>5</td>
<td contenteditable='true'>CRÉDIT POPULAIRE D’ALGÉRIE</td>
<td contenteditable='true'>CPA</td>
<td contenteditable='true'>2, Boulevard Colonel Amirouche, Alger</td>
<td contenteditable='true'>021 63 57 12</td>
<td contenteditable='true'>021 63 56 98 / 63 58 83</td>
<td> <button id='modif5' class='btn btn-info modif' name='button'>Modifier</button> </td>
<td> <button id='supp5' class='btn btn-info supp' name='button'>Supprimer</button> </td>
</tr>
</form>
</tbody>