Question

我有一个测试用例，当用户更改输入字段并单击提交按钮时，我需要重新加载表行。首次初始化表时，表体为空。然后我进行ReST调用以获取JSON数据并构造tbody html。我面临的问题是表中的一列应该是可见的。但是由于在启动表之后创建了html标记，因此显示应该隐藏的列。我试图在表API上调用draw（）函数，但这会导致数据丢失。还有其他办法吗？

HTML

<p>

        <input type="text" name="startDate" id="startDate"/><br/>
        <input type="text" name="endDate" id="endDate"/><br/>
        <button type="button" id="refresh">Refresh</button>

    </p>

    <table id="myTable" style="width: 400px;">
        <thead>
            <tr>
                <th class="no-show">Col A</th>
                <th>Col B</th>
                <th>Col C</th>
                <th>Col D</th>
                <th>Col E</th>
            </tr>

        </thead>
        <tbody>

        </tbody>

    </table>

脚本

<script type="text/javascript">

    var table;

    $(document).ready(function(){

        var table = $("#myTable").dataTable({
            "paging": true,
            "pageLength": 5,
            "pagingType": "simple",
            "info": false,
            "order": [[2, "desc"]],
            "aoColumnDefs":[
                {"aTargets": ["no-show"], "bVisible": false}
            ],
            "fnInitComplete": function(oSettings, json){
                $(".dataTables_filter, .dataTables_length").hide();

            }
        });

        refreshTable(table);


        $("#refresh").on('click', function(){
            refreshTable(table)
        });
    });



    function refreshTable(table)
    {
        var data = "startDate="+$("#startDate").val()+"&endDate="+$("#endDate").val();

        var url = "data.json";

        $.ajax({

            url: url,
            type: "GET",
            async: false,
            data: data,
            success: function(data){

                var tbodyHtml = "";

                for(var i=0; i< data.length ; i++)
                {
                    tbodyHtml += "<tr>";

                    tbodyHtml += "<td class='no-show'>"+data[i].eid+"</td>";
                    tbodyHtml += "<td>"+data[i].firstName+"</td>";
                    tbodyHtml += "<td>"+data[i].lastName+"</td>";
                    tbodyHtml += "<td>"+data[i].department+"</td>";
                    tbodyHtml += "<td>"+data[i].manager+"</td>";

                    tbodyHtml += "</tr>";
                }

                $("#myTable tbody").html(tbodyHtml);

                table.api().draw();

            }
        });


    }


</script>

P.S。我在这里的tbody html非常基本。在填充表格之前，我实际上必须对数据做一些逻辑。这就是为什么我没有在内置的AJAX api中使用Datatable。

重绘数据表会导致数据丢失

0 个答案: