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

发表于 | 分类于 |
字数统计: 1,797 | 阅读时长 ≈ 10

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

官方文档：DataTable

Demo代码：Demo代码

效果如下图示：
效果图示

效果图示

效果图示

效果图示

顶部button DOM结构：

1
2
3
4
5
6
7
8
9
10
11
12
// 页面上的三个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框的实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<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-control" id="bookAuthor" type="text">
            </div>
          </div>
          <div class="form-group">
            <label for="bookPrice" class="col-sm-2 control-label">价格:*</label>
            <div class="col-sm-10">
              <input class="form-control" id="bookPrice" type="text">
            </div>
          </div>
          <div class="form-group">
            <label for="bookPublish" class="col-sm-2 control-label">出版社:*</label>
            <div class="col-sm-10">
              <input class="form-control" id="bookPublish" type="text">
            </div>
          </div>
          <div class="form-group">
            <label for="bookISBN" class="col-sm-2 control-label">ISBN:*</label>
            <div class="col-sm-10">
              <input class="form-control" id="bookISBN" type="text">
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <div class="center-block">
          <button id="cancelAdd" type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button id="addBooksInfo" type="button" class="btn btn-success" data-dismiss="modal">保存</button>
        </div>
      </div>
    </div>
  </div>
</div>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<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">&times;</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框的实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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">&times;</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>

表格的实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
<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>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<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请求数据
例如数组数据：

1
var data = [['', '三体', '刘慈欣', '39.00', '重庆出版社', '982513213516']]

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<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>

很难接受就要和你分离了
小哥哥，小姐姐们，常来玩啊

本文标题:Jquery + dataTable + Bootstrap + 完整逻辑实现表格的增删改查

文章作者:小超子

发布时间:2018年07月03日 - 17:07

最后更新:2018年08月12日 - 12:08

原始链接:https://rain120.github.io/2018/07/03/dataTable/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

0%