我們在上一章節中已經學習了DataTables在BootStrap框架中的使用方式和初始化。
Bootstrap框架——DataTables列表示例

本章學習DataTables列表增加備註功能，可以通過點選按鈕後編輯備註傳送到後臺儲存入庫。

官網例子參考

環境準備

最終效果

實現方案

Java程式碼
新增RemarkLog實體

package com.test.domain.entity;
import java.io.Serializable;
import java.util.Date;
/**
 * 備註記錄
 */
public class RemarkLog
 
 implements Serializable {
    /**
     * 
     */
    private static final long serialVersionUID = 1L;
    private Date datetime; // 記錄日期
    private String operator; // 操作員
    private String remark; // 備註

    public RemarkLog(){}    

    public RemarkLog(String remark, String operator) {
        this(remark, operator, new
 
 Date());
    }

    public RemarkLog(String remark, String operator, Date datetime) {
        this.operator = operator;
        this.remark = remark;
        this.datetime = datetime;
    }

    public Date getDatetime() {
        return datetime;
    }

    public void setDatetime(Date datetime) {
        this
 
.datetime = datetime;
    }

    public String getOperator() {
        return operator;
    }

    public void setOperator(String operator) {
        this.operator = operator;
    }

    public String getRemark() {
        return remark;
    }

    public void setRemark(String remark) {
        this.remark = remark;
    }
}

Contacts增加remarks欄位和id欄位

package com.test.domain.entity;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;



/**
 * 聯絡人
 * 
 * 
 */
public class Contacts {
    private String id;// 姓名
    private String name;// 姓名
    private String tel;// 電話
    private int gender;// 性別
    private Date  creatTime;//建立時間
    private List<RemarkLog> remarks = new ArrayList<RemarkLog>();

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getTel() {
        return tel;
    }

    public void setTel(String tel) {
        this.tel = tel;
    }

    public Date getCreatTime() {
        return creatTime;
    }

    public void setCreatTime(Date creatTime) {
        this.creatTime = creatTime;
    }

    public int getGender() {
        return gender;
    }

    public void setGender(int gender) {
        this.gender = gender;
    }

    public List<RemarkLog> getRemarks() {
        return remarks;
    }

    public void setRemarks(List<RemarkLog> remarks) {
        this.remarks = remarks;
    }

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }









}

IndexController中新增

    @RequestMapping("/remark-add")
        @ResponseBody
        public Object addRemark(String id, String remark) {
            if (StringUtils.isEmpty(id) || StringUtils.isEmpty(remark)) {
                return JSONResult.error("未找到資料");
            }

            return addRemark("操作人", id, remark)
                    ? JSONResult.success("成功")
                    : JSONResult.error("失敗");
        }

        public boolean addRemark(String operator, String id, String remark) {
            return mongoTemplate.updateFirst(Query.query(Criteria.where("_id").is(id)),
                    new Update().push("remarks", new RemarkLog(remark, operator)).set("updateDate", DateUtils.now()),
                    Contacts.class).getN() > 0;
        }

JSONResult實體

package com.test.web.message.response;

/**
 * JSONResult
 * 標準化的JSON響應
 * 
 * <pre>
 * {@link JSONResult#success(Object)}
 * {@link JSONResult#error(String)}
 * </pre>
 * 
 * 
 */
public class JSONResult {

    /**
     * 成功的程式碼
     */
    public static final int         CODE_SUCCESS            = 0;

    /**
     * 錯誤的程式碼，可根據錯誤型別進行詳細分類
     */
    public static final int         CODE_ERROR              = -1;

    /**
     * 空白的成功響應
     */
    public static final JSONResult  RESULT_SUCCESS_NO_DATA  = new JSONResult(CODE_SUCCESS, null, null);

    private int                     code;
    private String                  msg;
    private Object                  data;

    /**
     * 建立一個成功的響應
     * 
     * @param data
     * @return
     */
    public static JSONResult success(Object data) {
        return new JSONResult(CODE_SUCCESS, null, data);
    }

    /**
     * 建立一個錯誤的響應
     * 
     * @param msg
     * @return
     */
    public static JSONResult error(String msg) {
        return new JSONResult(CODE_ERROR, msg, null);
    }

    /**
     * @param code
     * @param msg
     * @param data
     */
    public JSONResult(int code, String msg, Object data) {
        this.code = code;
        this.setMsg(msg);
        this.data = data;
    }

    public int getCode() {
        return code;
    }

    public JSONResult setCode(int code) {
        this.code = code;
        return this;
    }

    public Object getData() {
        return data;
    }

    public JSONResult setData(Object data) {
        this.data = data;
        return this;
    }

    public String getMsg() {
        return msg;
    }

    public JSONResult setMsg(String msg) {
        this.msg = msg;
        return this;
    }

}

Jsp程式碼

html中增加對應列

<th width="8%" class="desktop">備註</th>

js
columns列中增加程式碼

            {
                "data": "id",
                "class": "text-center",
                "render": function (id, type, row, position) {
                    return '<span>' + (row.remarks.length ? row.remarks[row.remarks.length - 1].remark : '') + '</span> <a href="javascript:;" class="glyphicon glyphicon-pencil edit-comment" id="' + id + '"/>';
                }
            },

dataTables初始化方法後面增加點選事件

.on('click', '.edit-comment', function () {
                var $span = $(this).hide().prev().hide();
                var $input = $('<input type="text" class="form-control input-simple input-remark" name="remark"/>').val('');
                $(this).before($input);
                $input.focus(); // 讓文字框獲取焦點
            }).on('keypress blur', '.input-remark', function (e) {
                if (e.type == 'keypress') {
                    if (e.keyCode == 13) $(this).blur(); // 回車也觸發失焦事件
                    return;
                }
                var $input = $(this);
                var endEdit = function (remark) {
                    remark ? $input.prev().text(remark).show() : $input.prev().show();
                    $input.next().show();
                    $input.remove();
                };

                if (!$input.val()) {
                    return endEdit();
                }

                $.ajax({
                    url: "/remark-add",
                    type: "POST",
                    data: {
                        id: $input.next().attr("id"),
                        remark: $input.val()
                    },
                    success: function (res) {
                        if (res.code) return alert('更新失敗');
                        endEdit($input.val());
                    },
                    error: function (err) {
                        alert('更新失敗: ' + err.status + ' ' + err.statusText);
                    }
                });
});