在数据后面的底部的jquery Datatable(Not Editor)中添加空行(For Insert)

时间:2017-10-31 08:03:08

标签: javascript jquery datatables

我的问题不是如何将空行作为空行显示为第一行的原因

   function BindCenterTable(ID,val) {
        var strSearchLang = " ";
        txtCenetrTotal.value = val;
        if (lang == 'en-US') {
            strSearchLang = "  Search   ";
        }
        $.ajax({
            type: "Post",
            url: 'Query.asmx/FillSubTransCenters',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: '{SubTransID: ' + ID + '}',


            success: function (data) {
                if (typeof CenterTable != 'undefined')
                    CenterTable.destroy();
                CenterTable = $('#tableCenters').DataTable({
                    "aaData": JSON.parse(data.d),
                    "bFilter": true,
                    "bInfo": false,
                    "lengthChange": false,
                    "oLanguage": {
                        "sSearch": strSearchLang
                    },
                    "paging": false,
                    "columns": [
                    { "data": "id" }, { "data": "Center_No" },
                    { "data": "CenterName" }, { "data": "Value" },
                    { "data": "Val_Percent" }
                    ],
                    "columnDefs": [
         {
             "targets": [0],
             "visible": false,
             "searchable": false
         }, {
             "targets": 5,
             "data": null,
             "defaultContent":
              ' <button class="btn btnEdit" type="button"> <i class="fa fa-pencil " style="font-size:20px"></i> </button> <button class="btn btnDelete" type="button"> <i class="fa fa-trash " style="font-size:20px"></i> </button>'

         }
                    ],

                });
                AddCenterEmptyRow();
            },
            error: function (err) {
                // alert(err);
            }
        })
    }



 function AddCenterEmptyRow() {
        var rowNode = CenterTable.row.add({
            "id": "0", "Center_No": "0", "CenterName": "0",
            "Value": "0", "Val_Percent": "0"
        }).draw().node();
        if (rowNode) {
            var jqTds = $('>td', rowNode);
            jqTds[0].innerHTML = '<table style="width:100%"><tr><td><input type="button" id="btnNewCenter"   value="..." ></td><td><input type="text" class="twitterStyleTextbox" style="width:60px" id="txtNewCenter_No" readonly ></td></tr></table>';
            jqTds[1].innerHTML = '<input type="text" class="twitterStyleTextbox" readonly id="txtNewCenterName" >';
            jqTds[2].innerHTML = '<input type="number" style="width:60px" id="txtNewCenterVal" class="twitterStyleTextbox">';
            jqTds[3].innerHTML = '<input type="number" style="width:60px" id="txtNewCenterPerc" class="twitterStyleTextbox">';
            jqTds[4].innerHTML = '<button class="btn btnSubNewCenterSave" type="button"> <i class="fa fa-save " style="font-size:20px"></i> </button> '
        }
        var e = document.getElementById('txtNewCenterVal');
        e.oninput = CenterValChange;
        e.onpropertychange = e.oninput; // for IE8
        var e = document.getElementById('txtNewCenterPerc');
        e.oninput = CenterPercChange;
        e.onpropertychange = e.oninput; // for IE8
        //var e = document.getElementById('txtNewEchange_Rate');
        //e.oninput = DebitChange;
        //e.onpropertychange = e.oninput; // for IE8
    }

每件事都运行正常,但数据出现在空行之后 1 - 是否有一种方法可以选择放置空行的顺序 2-是否有更好的方法来插入空行

注意:我无法使用页脚,因为它用于夏日但不包含该代码

谢谢

编辑

enter image description here

2 个答案:

答案 0 :(得分:0)

根据数据表的创建者回答related question

  

该行将根据应用于的排序进行定位   表。桌子的排序位置就在哪里,即   它会出现在哪里。

我的解决方案是使用sorting功能来执行此操作

这是我要做的live example ......

希望这有帮助

答案 1 :(得分:0)

不需要 jquery,只需将它放在 HTML 表格的页脚 <tfoot></tfoot> 中即可。