Datatables 行内编辑,获取鼠标点击的当前单元格

Datatables 行内编辑,获取鼠标点击的当前单元格
首先需要引入,重点在 columnDefs:

<link href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet">


<script src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>

html代码:

<table id="editable">
</table>

js代码:

   var oTable;
    oTable = $('#editable').DataTable({
            ajax: {
                url: "/keyword/keywordAjax",
                type: "post",
                data: function (d) {
                  //d 是原始的发送给服务器的数据,默认很长,这里是我自己封装过的,你使用自己的方式传输data就可以了。
                }
            },
            searching: false,//关闭搜索框
            serverSide: true,//服务器分页
            processing: true,
            paging: true,
            bSort: true,
            ordering: true,
            autoWidth: true,
            scrollCollapse: false,
            stateSave: true,//开启记录上次翻页
            info:true,
            createdRow: function (row, data, index) {
                /* 设置表格中的内容居中 */
                $('td', row).attr("class", "text-center");
                $('th').attr("class", "text-center");
            },
            columns: [
                {
                    title: "ID",
                    data: "id"
                } ,{
                    title:"中文名称",
                    data:"displayvaluezh"
                } ,{
                    title:"操作列",
                    render:function (data,type,full,callback) {
                        return `<a  title="编辑" onclick="#">编辑</a>;
                    }
                }
            ],
           columnDefs: [{
        "targets": [3, 4, 5, 7], //设置你要给哪一列开启行内编辑
        fnCreatedCell: function(cell, cellData, rowData, rowIndex, colIndex) {
            var trow = null;
            $(cell).click(function() {
                $(this).html('<input type="text" value="请输入" size="16" style="width: 100%"/>');
                var aInput = $(this).find(":input");
                aInput.focus().val(cellData);
                //在用户点击某一单元格的时候,获取当前单元格的信息( trow ),以便后面修改和使用。
                trow = oTable.row($(this)).data();
            });
            $(cell).on("blur", ":input", function() {
                var text = $(this).val();
                $(cell).html(text);
                oTable.cell(cell).data(text);
                console.info("当前修改行:" + JSON.stringify(trow));
                //现在你就可以将获取到当前行的json发送到后台进行修改了
            });
        })
                }]
            }
        });