jQuery DataTables是一款強(qiáng)大的數(shù)據(jù)表格插件，能夠讓我們快速創(chuàng)建交互式的數(shù)據(jù)表格。其中最常用的功能就是彈出框，可以讓我們?cè)诒砀裰行薷摹h除以及添加數(shù)據(jù)。

//創(chuàng)建彈出框
$('#example').on('click', 'tbody td:not(:first-child)', function () {
editor.inline(this, {
submit: 'allIfChanged'
});
});
//編輯
editor = new $.fn.dataTable.Editor({
ajax: "php/edit.php",
table: "#example",
fields: [{
label: "First name:",
name: "firstName"
}, {
label: "Last name:",
name: "lastName"
}, {
label: "Position:",
name: "position"
}, {
label: "Office:",
name: "office"
}, {
label: "Start date:",
name: "startDate",
type: "datetime"
}, {
label: "Salary:",
name: "salary"
}]
});
//刪除
editor = new $.fn.dataTable.Editor({
ajax: "php/delete.php",
table: "#example",
fields: [{
label: "Are you sure you want to delete this row?",
name: "delete",
type: "readonly"
}]
});
//添加
editor = new $.fn.dataTable.Editor({
ajax: "php/add.php",
table: "#example",
fields: [{
label: "First name:",
name: "firstName"
}, {
label: "Last name:",
name: "lastName"
}, {
label: "Position:",
name: "position"
}, {
label: "Office:",
name: "office"
}, {
label: "Start date:",
name: "startDate",
type: "datetime"
}, {
label: "Salary:",
name: "salary"
}]
});

以上就是使用jQuery DataTables實(shí)現(xiàn)彈出框的代碼示例，通過(guò)這個(gè)插件，我們可以方便地管理數(shù)據(jù)表格中的數(shù)據(jù)。