Jquery + dataTable + Bootstrap + 完整邏輯實現表格的增刪改查
阿新 • • 發佈：2019-02-07
最近在做畢設，同學在做前端頁面的時候使用到JQuery、DataTable和Bootstrap這些控制元件，然後自己又在刷題的時候遇到一個這個demo的實現，於是就自己去官網文件上學習了一下，嘗試實現這個demo
效果如下圖示：
頂部button DOM結構：
// 頁面上的三個button，增刪改
<div class="btn-group operation">
<button id="btn_add" type="button" class="btn bg-primary">
<span class="glyphicon glyphicon-plus" 這裡的Modal框的實現是藉助Bootstrap模態框來實現的
新增圖書 Modal框的實現：
<div class="modal fade" id="addBook" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class 修改圖書內容Modal框的實現：
<div class="modal fade" id="editBookInfo" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">修改圖書內容</h4>
</div>
<div id="editBookModal" class="modal-body">
<div class="form-horizontal">
<div class="form-group">
<label for="editBookName" class="col-sm-2 control-label">書名:*</label>
<div class="col-sm-10">
<input class="form-control" id="editBookName" type="text">
</div>
</div>
<div class="form-group">
<label for="editBookAuthor" class="col-sm-2 control-label">作者:*</label>
<div class="col-sm-10">
<input class="form-control" id="editBookAuthor" type="text">
</div>
</div>
<div class="form-group">
<label for="editBookPrice" class="col-sm-2 control-label">價格:*</label>
<div class="col-sm-10">
<input class="form-control" id="editBookPrice" type="text">
</div>
</div>
<div class="form-group">
<label for="editBookPublish" class="col-sm-2 control-label">出版社:*</label>
<div class="col-sm-10">
<input class="form-control" id="editBookPublish" type="text">
</div>
</div>
<div class="form-group">
<label for="editBookISBN" class="col-sm-2 control-label">ISBN:*</label>
<div class="col-sm-10">
<input class="form-control" id="editBookISBN" type="text">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="center-block">
<button id="cancelEdit" type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button id="saveEdit" type="button" class="btn btn-success" data-dismiss="modal">儲存</button>
</div>
</div>
</div>
</div>
</div>刪除Modal框的實現：
<div class="modal fade" id="deleteBook" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">確認要刪除嗎？</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button id="delete" type="button" class="btn btn-danger" data-dismiss="modal">刪除</button>
</div>
</div>
</div>
</div>表格的實現：
<table id="books" class="table table-striped table-bordered row-border hover order-column" cellspacing="0" width="100%">
<thead>
<tr>
<th>序號</th>
<th>書名</th>
<th>作者</th>
<th>價格</th>
<th>出版社</th>
<th>ISBN</th>
</tr>
</thead>
<tbody></tbody>
</table>使用到一些簡單的自定義樣式：
<style>
.content {
margin: 50px auto;
border: 1px solid #ccc;
}
.operation {
margin: 10px;
}
.operation > button {
margin: 10px;
}
#books_length {
float: left;
margin-left: 20px;
}
#books_filter {
float: right;
margin-right: 20px;
}
#books {
margin: 5px;
}
.center-block {
display: block;
width: 21%;
margin: auto;
}
</style>其中，dataTable有三種資料獲取方式，陣列，JSON和Ajax請求資料
例如陣列資料：
var data = [['', '三體', '劉慈欣', '39.00', '重慶出版社', '982513213516']]以上都是頁面的DOM結構的實現，接下來，我們講講JS程式碼實現邏輯
<script>
var data = [['', '三體', '劉慈欣', '39.00', '重慶出版社', '982513213516']]
var titles = ['書名', '作者', '價格', '出版社', 'ISBN']
$(function () {
var table = $('#books').DataTable({
data: data,
"pagingType": "full_numbers",
"bSort": true,
// 國際化
"language": {
"sProcessing": "處理中...",
"sLengthMenu": "顯示 _MENU_ 項結果",
"sZeroRecords": "沒有匹配結果",
"sInfo": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項",
"sInfoEmpty": "顯示第 0 至 0 項結果，共 0 項",
"sInfoFiltered": "(由 _MAX_ 項結果過濾)",
"sInfoPostFix": "",
"sSearch": "搜尋:",
"sUrl": "",
"sEmptyTable": "表中資料為空",
"sLoadingRecords": "載入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首頁",
"sPrevious": "上頁",
"sNext": "下頁",
"sLast": "末頁"
},
// 排序方式
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
},
"columnDefs": [{
"searchable": false,
"orderable": true,
"targets": 0
}],
"order": [[1, 'asc']]
});
table.on('order.dt search.dt', function() {
table.column(0, {
search: 'applied',
order: 'applied'
}).nodes().each(function(cell, i) {
cell.innerHTML = i + 1;
});
}).draw();
$('#books tbody').on('click', 'tr', function () {
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}
else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
});
// 取消新增
$("#cancelAdd").on('click', function() {
console.log('cancelAdd');
$("#addBookModal").find('input').val('')
})
// 新增圖書資訊
$("#addBooksInfo").on('click', function() {
console.log('addBooksInfo');
if (data.length) {
if ($("#addBookModal").find('input').val() !== '') {
var bookName = $("#bookName").val()
var bookAuthor = $("#bookAuthor").val()
var bookPrice = $("#bookPrice").val()
var bookPublish = $("#bookPublish").val()
var bookISBN = $("#bookISBN").val()
var addBookInfos = [].concat(bookName, bookAuthor, bookPrice, bookPublish, bookISBN);
for (var i = 0; i < addBookInfos.length; i++) {
if (addBookInfos[i] === '') {
alert(titles[i] + '內容不能為空')
}
}
table.row.add(['', bookName, bookAuthor, bookPrice, bookPublish, bookISBN]).draw();
$("#addBookModal").find('input').val('')
}
} else {
alert('請輸入內容')
}
})
$("#addBooksInfo").click();
$("#btn_add").click(function(){
console.log('add');
$("#addBook").modal()
});
// 編輯圖書
$('#btn_edit').click(function () {
console.log('edit');
if (table.rows('.selected').data().length) {
$("#editBookInfo").modal()
var rowData = table.rows('.selected').data()[0];
var inputs = $("#editBookModal").find('input')
for (var i = 0; i < inputs.length; i++) {
$(inputs[i]).val(rowData[i + 1])
}
} else {
alert('請選擇專案');
}
});
// 儲存編輯
$("#saveEdit").click(function() {
var editBookName = $("#editBookName").val()
var editBookAuthor = $("#editBookAuthor").val()
var editBookPrice = $("#editBookPrice").val()
var editBookPublish = $("#editBookPublish").val()
var editBookISBN = $("#editBookISBN").val()
var newRowData = [].concat(editBookName, editBookAuthor, editBookPrice, editBookPublish, editBookISBN);
var tds = Array.prototype.slice.call($('.selected td'))
for (var i = 0; i < newRowData.length; i++) {
if (newRowData[i] !== '') {
tds[i + 1].innerHTML = newRowData[i];
} else {
alert(titles[i] + '內容不能為空')
}
}
})
// 取消儲存
$("#cancelEdit").click(function() {
console.log('cancelAdd');
$("#editBookModal").find('input').val('')
})
// 刪除專案
$('#btn_delete').click(function () {
if (table.rows('.selected').data().length) {
$("#deleteBook").modal()
} else {
alert('請選擇專案');
}
});
// 刪除
$('#delete').click(function () {
table.row('.selected').remove().draw(false);
});
})
</script>