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

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

官方文档：DataTable

Demo代码：Demo代码

效果如下图示：

顶部button DOM结构：

// 页面上的三个button，增删改
"btn-group operation">
  "btn_add" type="button" class="btn bg-primary">
    "glyphicon glyphicon-plus" aria-hidden="true">新增
  
  "btn_edit" type="button" class="btn bg-info">
    "glyphicon glyphicon-pencil" aria-hidden="true">修改
  
  "btn_delete" type="button" class="btn btn-success">
    "glyphicon glyphicon-remove" aria-hidden="true">删除
  

复制代码

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

添加图书 Modal框的实现：

"modal fade" id="addBook" role="dialog">
  
"modal-dialog">
    
"modal-content">
      
"modal-header">
        type="button" class="close" data-dismiss="modal">×
        
"modal-title">添加图书
      
      
"addBookModal" class="modal-body">
        
"form-horizontal">
          
"form-group">
            for="bookName" class="col-sm-2 control-label">书名:*
            
"col-sm-10">
              "form-control" id="bookName" type="text">
            
          
          
"form-group">
            for="bookAuthor" class="col-sm-2 control-label">作者:*
            
"col-sm-10">
              "form-control" id="bookAuthor" type="text">
            
          
          
"form-group">
            for="bookPrice" class="col-sm-2 control-label">价格:*
            
"col-sm-10">
              "form-control" id="bookPrice" type="text">
            
          
          
"form-group">
            for="bookPublish" class="col-sm-2 control-label">出版社:*
            
"col-sm-10">
              "form-control" id="bookPublish" type="text">
            
          
          
"form-group">
            for="bookISBN" class="col-sm-2 control-label">ISBN:*
            
"col-sm-10">
              "form-control" id="bookISBN" type="text">
            
          
        
      
      
"modal-footer">
        
"center-block">
          "cancelAdd" type="button" class="btn btn-default" data-dismiss="modal">取消
          "addBooksInfo" type="button" class="btn btn-success" data-dismiss="modal">保存
        
      
    
  

复制代码

修改图书内容Modal框的实现：

"modal fade" id="editBookInfo" role="dialog">
  
"modal-dialog">
    
"modal-content">
      
"modal-header">
        type="button" class="close" data-dismiss="modal">×
        
"modal-title">修改图书内容
      
      
"editBookModal" class="modal-body">
        
"form-horizontal">
          
"form-group">
            for="editBookName" class="col-sm-2 control-label">书名:*
            
"col-sm-10">
              "form-control" id="editBookName" type="text">
            
          
          
"form-group">
            for="editBookAuthor" class="col-sm-2 control-label">作者:*
            
"col-sm-10">
              "form-control" id="editBookAuthor" type="text">
            
          
          
"form-group">
            for="editBookPrice" class="col-sm-2 control-label">价格:*
            
"col-sm-10">
              "form-control" id="editBookPrice" type="text">
            
          
          
"form-group">
            for="editBookPublish" class="col-sm-2 control-label">出版社:*
            
"col-sm-10">
              "form-control" id="editBookPublish" type="text">
            
          
          
"form-group">
            for="editBookISBN" class="col-sm-2 control-label">ISBN:*
            
"col-sm-10">
              "form-control" id="editBookISBN" type="text">
            
          
        
      
      
"modal-footer">
        
"center-block">
          "cancelEdit" type="button" class="btn btn-default" data-dismiss="modal">取消
          "saveEdit" type="button" class="btn btn-success" data-dismiss="modal">保存
        
      
    
  

复制代码

删除Modal框的实现：

"modal fade" id="deleteBook" role="dialog">
  
"modal-dialog">
    
"modal-content">
      
"modal-header">
        type="button" class="close" data-dismiss="modal">×
        
"modal-title">确认要删除吗？
      
      
"modal-footer">
        type="button" class="btn btn-default" data-dismiss="modal">取消
        "delete" type="button" class="btn btn-danger" data-dismiss="modal">删除
      
    
  

复制代码

表格的实现：

"books" class="table table-striped table-bordered row-border hover order-column" cellspacing="0" width="100%">
  

    

      
序号
      
书名
      
作者
      
价格
      
出版社
      
ISBN
    
  
  


复制代码

使用到一些简单的自定义样式：

复制代码

其中，dataTable有三种数据获取方式，数组，JSON和Ajax请求数据 例如数组数据：

var data = [['', '三体', '刘慈欣', '39.00', '重庆出版社', '982513213516']]
复制代码

其实官网很多小例子，大家可以参考学习 dataTables中文网

以上都是页面的DOM结构的实现，接下来，我们讲讲JS代码实现逻辑

复制代码

知乎

个人博客

Github