Jquery + dataTable + Bootstrap + 完整逻辑实现表格的增删改查

Github - program-learning-lists

最近在做毕设，同学在做前端页面的时候使用到JQuery、DataTable和Bootstrap这些控件，然后自己又在刷题的时候遇到一个这个demo的实现，于是就自己去官网文档上学习了一下，尝试实现这个demo

官方文档：DataTable

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" aria-hidden="true"></span>新增
  </button>
  <button id="btn_edit" type="button" class="btn bg-info">
    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
  </button>
  <button id="btn_delete" type="button" class="btn btn-success">
    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
  </button>
</div>

这里的Modal框的实现是借助Bootstrap模态框来实现的

添加图书 Modal框的实现：

<div class="modal fade" id="addBook" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">添加图书</h4>
      </div>
      <div id="addBookModal" class="modal-body">
        <div class="form-horizontal">
          <div class="form-group">
            <label for="bookName" class="col-sm-2 control-label">书名:*</label>
            <div class="col-sm-10">
              <input class="form-control" id="bookName" type="text">
            </div>
          </div>
          <div class="form-group">
            <label for="bookAuthor" class="col-sm-2 control-label">作者:*</label>
            <div class="col-sm-10">
              <input class="form-