数据表 S.no 渲染问题

Question

我在数据表的第一列中有 S.No，并带有以下渲染代码

 "render" : function(data, type, full, meta) {                                           
        return '<input type="radio" id="parRadio" value="'+ full+'" name="parRadio" />';
   }

S.No 显示完美，但在导出到 pdf 或 excel 时 S.No 计数不正确，它没有重置值。

Answer 1

我想出了这个解决方案。它在第二列中有一个选择框。如果我什么都不做，它会将每个值放在 excel 表的选择框中，而不是实际值。

我使用事件处理程序来保持表格数据和选择框同步。

然后我使用 customizeData 回调来修复数据。

http://jsbin.com/solipe/edit?js,output

   $(document).ready(function () {

        // create fake column to put in selectbox
        for (var i = 0; i < dataStore.data.length; ++i) {
            var b = Math.floor((Math.random() * 10) + 1);
            dataStore.data[i].groupId = b;
        }

        $('#example').DataTable({
            "data": dataStore.data,
            "columns": [
            { "data": "name" },
            { "data": "groupId" },
            { "data": "position" },
            { "data": "office" },
            { "data": "extn" },
            { "data": "start_date" },
            { "data": "salary" }
            ], dom: 'Bfrtip',
            columnDefs: [{
                // adds a selectobs to the second column
                targets: [1], render: function (a, b, c, d) {
                    var str = "";
                    for (var j = 1; j < 11; ++j) {
                        str += "<option " + (j == a ? " selected " : "") + "  value='" + j + "'>" + j + "</option>";
                    }
                    str = "<select >" + str + "</select>";
                    return str;
                }
            }],
            buttons: [
            {
                extend: 'excelHtml5',
                text: 'Save as Excel',
                // updates the data before being sent to excel
                customizeData: function (a, b, c, d) {
                    var exd = a.body;
                    var dtdata = $('#example').DataTable().rows().data();
                    for (var ii = 0; ii < dtdata.length ; ++ii) {
                        var cur = dtdata[ii].groupId;
                        exd[ii][1] = cur;
                    }

                }
            }
            ]
        });
        // Event Handler for keeping the data object in sync with the selectbox
        $("#example").on("change", "select", function () {
            var val = $(this).val();
            var rowData = $("#example").DataTable().rows($(this).closest("tr")).data();
            rowData[0].groupId = val;
        });
    });