Jquery datatable一些应用的记录(一）

记录一下一个实训的任务，主要需求为采用adminLTE中的Table中的datatable加载后端数据。后端使用springboot+hibernate。

datatable官网:datatables.net/
adminLTE地址:github.com/ColorlibHQ/… 第一次接触一个前后端的项目，而且也是第一次使用jquery和hibernate，所以可能会有部分代码很诡异，这里仅做自己的存档在写，方便后续查看改进。^_^

需求

• 实现按字段排序、数据检索功能。
• 实现分页展示
• 利用模态框实现对数据表的增、插、改操作。
• 实现记录的lazy—load

1.首先实现前后端的互通。

前端初始化一个datatable。

var table = $('#example2').DataTable({
        "dom":"<'row'<'col-sm-12 col-md-6'i><'col-sm-12 col-md-6'f>>" +
          "<'row'<'col-sm-12'tr>>" +
          "<'row'<'col-xs-6 col-md-2 m-auto'p>>",//自定义表格样式
        "paging": true,//开启分页
        "info": true,//开启分页信息
        "scrollX":true,
        autoWidth: false,
        serverSide: true,//开启服务端模式
        ajax: {
            url: "http://localhost:8088/project/seve1",
            type:"POST",
            contentType:"application/json",
            dataType:'json',
            //将data转换成json对象才能传到后端的postmapping
            data:function (mydatas) {
                return JSON.stringify(mydatas)
            },
        },
        columns:[//配置表格的列属性
            {
              data: null,
              orderable: false,
              className: 'select-checkbox',
              targets:   0,
              defaultContent: ""
            },
            {data:"nodeId"},
            {data:"pnodeId"},
            {data:"nodeName"},
            {data:"treeId"},
            {data:"note"},
            {data:"listOrder"},
            {data:"nodePath","width":"2%","render":function (data,type,row) {
                return data
              },defaultContent:""},
            {data:"visible"},
            {data:"nodeCode"},
            {data:"pnodeCode"},
            {data:"frtEdCode"},
            {data:"arci"},
            {data:"checkState"},
            {data:"refuseNote"},
            {data:"flag"},
            {data: null,"render":function (data,type,row) {//自定义表格内容
                var html = "<td> <div class='text-left'> <a class='btn btn-primary  btn-mini' onclick='fnEdit(this)'>编辑</a>";
                html += "<a class='btn btn-success' onclick='addData(this)'>添加</button>";
                html += "</div></td>";
                return html;//这里表示一列中添加两个按钮
              }
            }
        ],
        columnDefs: [
          {//这个用来设置列的属性，这里是表示第一列为选择框。
            orderable: false,
            className: "select-checkbox",
            targets:0//第一列
          }
        ],
        dataSrc:"",
        select: {
          style:    'os',
          selector: 'td:first-child'
        },
    })

左上可以选择一列加载多少条数据，右上角支持模糊搜索。左下角显示当前显示的条数和数据库一共多少数据。右下角显示分页。

后端采用springboot+hibernate，目录结构：

前后端交互，能够一次性请求完所有数据就算成功！

实现按字段排序、数据检索功能。

datatable中有一个ordering属性，属性的默认值为true
ordering:true
默认会为每一列开启排序，如果设置false则关闭排序。
默认的也会自带一个搜索框，如果采用的是bootstrap4，搜索框会在右上角。具体的参数可以查看datatable中的dom参数(地址：datatables.net/reference/o… )，他是通过dom来控制各个控件的位置。

实现分页展示

如果是静态加载，那么请求完总体数据之后，数据的分页、排序全在浏览器中进行。官网中这么描述:

• Client-side processing - where filtering, paging and sorting calculations are all performed in the web-browser.
• Server-side processing - where filtering, paging and sorting calculations are all performed by a server.

所以目前来说是可以完成分页的。

利用模态框实现对数据表的增、插、改操作

模态框界面:

以下是模态框的html:

<div class="modal fade" id="editModal" aria-hidden="true" role="dialog">
  <div class="modal-dialog modal-lg" >
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editModalTitle">记录修改</h5>
        <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
      </div>
      <!--内部-->
      <form id="formData" class="form-horizontal">
        <div class="modal-body">
          <div class="d-flex flex-row">
            <div class="form-group" id="nodeid_group">
              <label class="control-label col-lg-2">NODE_ID: </label>
              <div class="col-lg-9">
                <input type="text"  id="nodeID" placeholder="Node_ID" class="form-control" disabled
                >
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-lg-2">PNODE_ID:</label>
              <div class="col-lg-9">
                <input type="text"  value="" id="pnodeID" placeholder="Pnode_ID" class="form-control" disabled>
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-lg-2">NODE_NAME:</label>
              <div class="col-lg-9">
                <input type="text"  value="" id="nodeName1" placeholder="Node_Name"class="form-control">
              </div>
            </div>
          </div>
          <div class="d-flex flex-row">
            <div class="form-group">
              <label class="control-label col-lg-2">TREE_ID: </label>
              <div class="col-lg-9">
                <input type="text" value="" id="treeID" placeholder="Tree_ID" class="form-control" disabled>
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-lg-2">NOTE: </label>
              <div class="col-lg-9">
                <input type="text"  value="" id="Note" placeholder="Note" class="form-control">
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-lg-2">LIST_ORDER: </label>
              <div class="col-lg-9">
                <input type="text"  value="" id="listORDER" placeholder="List_Order"class="form-control">
              </div>
            </div>
          </div>
          <div class="d-flex flex-row">
            <div class="form-group">
              <label class="control-label col-lg-2">NODE_PATH: </label>
              <div class="col-lg-9">
                <input type="text" value="" id="NodePath" placeholder="Node_Path" class="form-control">
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-lg-2">VISIBLE:</label>
              <div class="col-lg-9">
                <input type="text"  value="" id="visible" placeholder="Visible" class="form-control">
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-lg-2">NODE_CODE:</label>
              <div class="col-lg-9">
                <input type="text"  value="" id="nodeCode" placeholder="Node_Code"class="form-control">
              </div>
            </div>
          </div>
          <div class="d-flex flex-row">
            <div class="form-group">
              <label class="control-label col-lg-2">FRT_ED_CODE: </label>
              <div class="col-lg-9">
                <input type="text" value="" id="frtEdCode" placeholder="Frt_Ed_Code" class="form-control">
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-lg-2">ARCI:</label>
              <div class="col-lg-9">
                <input type="text"  value="" id="arci" placeholder="Arci" class="form-control">
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-lg-2">CHECK_STATE：</label>
              <div class="col-lg-9">
                <input type="text"  value="" id="checkState" placeholder="Check_State"class="form-control">
              </div>
            </div>
          </div>
          <div class="d-flex flex-row">
            <div class="form-group">
              <label class="control-label col-lg-2">REFUSE_NOTE: </label>
              <div class="col-lg-9">
                <input type="text" value="" id="refuseNote" placeholder="Refuse_Note" class="form-control">
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-lg-2">FLAG: </label>
              <div class="col-lg-9">
                <input type="text" value="" id="flag"  class="form-control" disabled>
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-lg-2">PNODE_CODE: </label>
              <div class="col-lg-9">
                <input type="text" value="" id="pnodeCode"  class="form-control" placeholder="Pnode_Code" disabled>
              </div>
            </div>
          </div>
        </div>

        <div class="modal-footer">
          <button class="btn btn-default" type="button" data-dismiss="modal">close</button>
          <button class="btn btn-success" type="button" onclick="submitDatas(this)">submit</button>
        </div>
      </form>
    </div>
  </div>
</div>

其中接触到了bootstrap中的栅格系统，可以根据不同的设备定制不同的宽度。链接：www.runoob.com/bootstrap4/…

提交的js:

function submitDatas(obj){
  // var row = $(obj).parents("form")[0];//获得当前点击的列的数据。
  // var rowData = $("#example2").dataTable().fnGetData(row);//通过datatable的内置函数，来获得值
  let object = {}
  object.nodeId = $("#nodeID").val()
  object.pnodeId=$("#pnodeID").val()
  object.nodeName=$("#nodeName1").val()
  object.treeId=$("#treeID").val()
  object.note=$("#Note").val()
  object.listOrder=$("#listORDER").val()
  object.nodePath=$("#NodePath").val()
  object.visible=$("#visible").val()
  object.nodeCode=$("#nodeCode").val()
  object.pnodeCode=$("#pnodeCode").val()
  object.frtEdCode=$("#frtEdCode").val()
  object.arci=$("#arci").val()
  object.checkState=$("#checkState").val()
  object.refuseNote=$("#refuseNote").val()
  object.flag=$("#flag").val()

  // console.log(object)
  if($('#editModalTitle').text()=="记录修改"){//因为存在添加和更新两个操作，所以简单的复用了一下。
    $.ajax({
        url:"http://localhost:8088/project",
        type: "PUT",
        contentType:"application/json",
        dataType:'json',
        data :JSON.stringify(object),
        success:function (msg){
            console.log("成功！")
            $('#editModal').modal("hide")
            $("#example2").DataTable().draw("false")
            //清除模态框的记录
            $('#formData').trigger("reset")
        },
    })
  }else{//提交添加新节点
    delete object.nodeId;
    console.log(object)
    $.ajax({
      url:"http://localhost:8088/project",
      type: "POST",
      contentType:"application/json",
      dataType:'json',
      data :JSON.stringify(object),
      success:function (msg){
        console.log("成功！")
        $('#editModal').modal("hide")
        //更新表格
        table.draw(false)
        //清除模态框的记录
        $('#formData').trigger("reset")
      },

    })
  }
}

实现记录的lazy—load

启用数据的服务端加载。
首先在datatable中开启serverSide:true。
第二个在springboot中加入依赖:

<dependency>
  <groupId>com.github.darrachequesne</groupId>
  <artifactId>spring-data-jpa-datatables</artifactId>
  <version>5.0.0</version>
</dependency>

第三，在Reposity中继承

该依赖，用于封装serverSide传入的参数使其成为一个DatatableInput类型: DatatableInput其中包含6个属性：

draw : 绘制计数器。DataTables使用它来确保服务器端处理请求返回的Ajax由DataTables按顺序绘制（Ajax请求是异步的，因此可能会无序返回）。该参数用作绘制返回参数的一部分。
start : 分页第一个记录指示器。这是当前数据集中的起点。
length : 表可以在当前绘图中显示的记录数。除非服务器要返回的记录更少，否则返回的记录数预计将等于此数字。请注意，这可以是-1，表示应返回所有记录.
search : 全局搜索值。应用于所有可搜索为true的列.
order : 应用排序的列。这是对也提交给服务器的信息列数组的索引引用。
column : 列的名称，由列定义。
官网链接： datatables.net/manual/serv…

当然，还需要在前端中加入jquery.spring-friendly.js。
具体操作可以参考链接：github.com/darracheque…

当时在做的时候还遇到了传送数据的问题。 用了这个依赖封装后的数据采用POST请求的json对象(当然在后台解析也可以)。在ajax中需要做一些配置:

ajax: {
    url: "http://localhost:8088/project/seve1",
    type:"POST",//post请求
    contentType:"application/json",//类型为json
    dataType:'json',
    //将data转换成json对象才能传到后端的postmapping
    data:function (mydatas) {//ajax的data属性设置的是发动到后端的数据
        return JSON.stringify(mydatas)//这里需要将原本的数据转换为json
    },
},

ajax.data : 作为一个对象，ajax.data选项用于扩展DataTables内部构造的数据对象，以提交给服务器。
在后端处理过后，会转换为一个DataTableOutput对象返回给前端。