Javascript 数据表内部的Ajax自定义按钮操作
我想将datatables数据存储在数组或json格式中，并使用它传递给php供FPDF使用。在我的datatable中，我创建了一个名为“PDF”的自定义按钮，当单击该按钮时，我希望存储数据并通过post将其传递到php。我有这段代码，但是如果我把ajax放在我制作的自定义按钮的动作函数中，它就不起作用了。它不会转到我声明的url。代码如下： 已编辑Javascript 数据表内部的Ajax自定义按钮操作,javascript,php,jquery,ajax,datatable,Javascript,Php,Jquery,Ajax,Datatable,我想将datatables数据存储在数组或json格式中，并使用它传递给php供FPDF使用。在我的datatable中，我创建了一个名为“PDF”的自定义按钮，当单击该按钮时，我希望存储数据并通过post将其传递到php。我有这段代码，但是如果我把ajax放在我制作的自定义按钮的动作函数中，它就不起作用了。它不会转到我声明的url。代码如下： 已编辑 <script> $(document).ready(function() { var table
<script>
$(document).ready(function() {
var table = $('#stud_list').DataTable({
dom: 'Blfrtip',
columnDefs: [{
targets: 1,
className: 'noVis'
}],
buttons: [{
extend: 'excelHtml5',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'csvHtml5',
exportOptions: {
columns: ':visible'
}
},
{
text: 'PDF',
exportOptions: {
columns: ':visible'
},
action: function(e, dt, node, config) {
$.ajax({
url: 'pdfViewStudent.php',
type: 'post',
data: table.row().data().toArray(),
dataType: 'json',
success: function(returnedData) {
console.log(returnedData);
}
});
}
},
'colvis'
],
columnDefs: [{
targets: -1,
visible: false
}],
initComplete: function() {
this.api().columns([4, 5, 6]).every(function() {
var column = this;
var select = $('<select><option value=""></option></select>')
.appendTo($(column.footer()).empty())
.on('change', function() {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
column.data().unique().sort().each(function(d, j) {
select.append('<option value="' + d + '">' + d + '</option>')
});
});
}
});
});
</script>
$（文档）.ready（函数（）{
变量表=$（“#螺柱列表”）。数据表({
dom:'Blfrtip'，
columnDefs：[{
目标：1，
类名：“noVis”
}],
按钮：[{
扩展：“excelHtml5”，
出口选择：{
列：“：可见”
}
},
{
扩展：“csvHtml5”，
出口选择：{
列：“：可见”
}
},
{
文本：“PDF”，
出口选择：{
列：“：可见”
},
动作：函数（e、dt、节点、配置）{
$.ajax({
url:'pdfViewStudent.php'，
键入：“post”，
数据：table.row（）.data（）.toArray（），
数据类型：“json”，
成功：函数（返回数据）{
控制台日志（返回的数据）；
}
});
}
},
“科尔维斯”
],
columnDefs：[{
目标：-1，
可见：假
}],
initComplete:function（）{
this.api（）.columns（[4,5,6]）.every（function（））{
var列=此；
变量选择=$（“”）
.appendTo（$（column.footer（））.empty（））
.on（'change'，function（））{
var val=$.fn.dataTable.util.escapeRegex(
$（this.val（）
);
柱
.search（val？“^”+val+“$”：“”，true，false）
.draw（）；
});
column.data（）.unique（）.sort（）.each（函数（d，j）{
选择。追加（“”+d+“”）
});
});
}
});
});
<table id="stud_list" class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Last Name</th>
<th>First Name</th>
<th>Initials</th>
<th>Grade</th>
<th>Section</th>
<th>Gender</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
$result = mysqli_query($connect, "SELECT * FROM tbl_student") or die(mysqli_error());
while($row = mysqli_fetch_array($result,MYSQLI_ASSOC)){
?>
<tr>
<td>
<?php echo $row['student_id']; ?>
</td>
<td>
<?php echo $row['last_name']; ?>
</td>
<td>
<?php echo $row['first_name']; ?>
</td>
<td>
<?php echo $row['Initials']; ?>
</td>
<td>
<?php echo $row['gradeLevel_id']; ?>
</td>
<td>
<?php echo $row['section_id']; ?>
</td>
<td>
<?php echo $row['gender']; ?>
</td>
<td>
<a class="btn btn-success btn-xs" href="studentProfile.php?studId=<?php echo $row['student_id']; ?>"><i class="fa fa-eye fa-1x"></i></a>
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#editStudent" data-studaydi="<?php echo $row['student_id']; ?>" data-cardaydi="<?php echo $row['card_id']; ?>" data-seksyon="<?php echo $row['section_id']; ?>" data-gardyan="<?php echo $row['Parents_No']; ?>" data-location="<?php echo $row['address']; ?>" data-ln="<?php echo $row['last_name']; ?>" data-fn="<?php echo $row['first_name']; ?>" data-mn="<?php echo $row['Initials']; ?>" data-gn="<?php echo $row['gender']; ?>" data-cy="<?php echo $row['cyear']; ?>" data-gr="<?php echo $row['gradeLevel_id']; ?>"><i class="fa fa-edit fa-1x"></i></button>
<a onclick="javascript: return confirm('DO YOU REALLY WANT TO DELETE THIS STUDENT?');" href="removeStudent.php?id=<?php echo $row['student_id']; ?>" class="btn btn-danger btn-xs"><i class="fa fa-remove fa-1x"></i></a>
</td>
<?php } ?>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</tfoot>
</table>
身份证件
姓
名字
首字母
等级
部分
性别
行动
嗯，我很确定您的datatable格式不正确。您能在这里添加html代码吗？至少，datatable定义的第一行应该是var table=$（'#stud_list'）。datatable({
我认为html代码没有问题。每当我定义表时，它都会给我一个错误，即它无法读取属性“row”是未定义的。@Roamer-1888尝试了它，没有错误，但什么也没有发生。它没有将我指向URL。控制台中也没有任何内容。你想在哪里添加按钮？你能不能跳过html代码？