Jquery + dataTable + Bootstrap + 完整邏輯實現表格的增刪改查

時間 2019-12-05

標籤 jquery datatable bootstrap 完整邏輯實現表格增刪欄目 JQuery 简体版

原文原文鏈接

最近在作畢設，同窗在作前端頁面的時候使用到JQuery、DataTable和Bootstrap這些控件，而後本身又在刷題的時候遇到一個這個demo的實現，因而就本身去官網文檔上學習了一下，嘗試實現這個demohtml

官方文檔：DataTable前端

Demo代碼：Demo代碼node

效果以下圖示：
git

頂部button DOM結構：github

// 頁面上的三個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模態框來實現的bootstrap

添加圖書 Modal框的實現：api

<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框的實現：數組

<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框的實現：app

<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>

表格的實現：學習

<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']]

其實官網不少小例子，你們能夠參考學習
dataTables中文網

以上都是頁面的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>

知乎

我的博客

Github