Question

我有两个表，一个是动态的，另一个是静态的。数据表插件适用于静态表但是当我为我的动态表实现相同的代码时，它不起作用（任何选项单击它显示“表格中没有可用数据”。分页，搜索，排序等不起作用）。我已经用第二个表生成的HTML测试了它也有效。对于数据表，这里是我的代码示例（两个表的Datatable脚本和jQuery源都相同） -

//Used scripts are :

//<script src="~/Scripts/jquery-3.1.1.min.js"></script>
//<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
//<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css">
//<link rel="stylesheet" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">

//<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

(function ($) {

            //  var table = $('#tbl_issue_Table').DataTable( 
            //or
            var table = $('#myTable').DataTable(  
                  {                      
                      paging: true,
                      pagingType: "full_numbers",
                      stateSave: true, autoWidth: true

                  })
                  });

这是我的静态表代码示例，它与数据表很好地工作（分页，搜索等工作正常） -

<table id="myTable" class="table table-striped">
    <thead>
        <tr>
            <th>ENO</th>
            <th>EMPName</th>
            <th>Country</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>001</td>
            <td>Anusha</td>
            <td>India</td>
            <td>10000</td>
        </tr>
        <tr>
            <td>002</td>
            <td>Charles</td>
            <td>United Kingdom</td>
            <td>28000</td>
        </tr>
        <tr>
            <td>003</td>
            <td>Sravani</td>
            <td>Australia</td>
            <td>7000</td>
        </tr>
        <tr>
            <td>004</td>
            <td>Amar</td>
            <td>India</td>
            <td>18000</td>
        </tr>
        <tr>
            <td>005</td>
            <td>Lakshmi</td>
            <td>India</td>
            <td>12000</td>
        </tr>
        <tr>
            <td>006</td>
            <td>James</td>
            <td>Canada</td>
            <td>50000</td>
        </tr>

        <tr>
            <td>007</td>
            <td>Ronald</td>
            <td>US</td>
            <td>75000</td>
        </tr>
        <tr>
            <td>008</td>
            <td>Mike</td>
            <td>Belgium</td>
            <td>100000</td>
        </tr>
        <tr>
            <td>009</td>
            <td>Andrew</td>
            <td>Argentina</td>
            <td>45000</td>
        </tr>

        <tr>
            <td>010</td>
            <td>Stephen</td>
            <td>Austria</td>
            <td>30000</td>
        </tr>
        <tr>
            <td>011</td>
            <td>Sara</td>
            <td>China</td>
            <td>750000</td>
        </tr>
        <tr>
            <td>012</td>
            <td>JonRoot</td>
            <td>Argentina</td>
            <td>65000</td>
        </tr>
    </tbody>
</table>

这是动态表格代码示例 -

//For generating dynamic table:
<script>
    $(document).ready(function () {
        $("#tableDiv").hide();
var pbsIDval = $("#pbsDropDown").val();
        var officeIDval = $("#officeDropDown").val();
        var statusIDval = $("#statusDropDown").val();
        var startDateval = $("#startDate").val();
        var endDateval = $("#endDate").val();

        $("#searchButton").click(function () {
            $("#tableDiv").show();

          
            var issueCount = 0;
            $("#rowBody").empty();

            $.ajax({
                type: 'POST',
                url: '@Url.Action("SearchData")',
                datatype: JSON,
                data: {
                    PbsId: pbsIDval,
                    OfficeId: officeIDval,
                    StatusId: statusIDval,
                    StartDate: startDateval,
                    EndDate: endDateval
                },

                success: function (response) {
                    if (response.success == true) {

                        $.each(response.data, function (rt, val) {


                          
                            var uri = "http://172.16.1.47:8000/RecordFiles/IssueCreator/b0a9d79c-301a-43c3-bf79-b9672bbe669d.wav";
                            

                            $("#rowBody").append('<tr><td>' + val.Id + '</td>' + '<td>' + val.PbsName + '</td>' + '<td>' + val.OfficeName + '</td>' + '<td>' + val.ProblemName +
                                '</td>' + '<td>' + val.StatusName + '</td>' + '<td>' + val.ResolverName + '</td>' + '<td>' + val.OPSName + '<td><audio  controls="controls"><source src='+ uri +' type="audio/ogg"></audio></td></tr>')
                           


                            issueCount++;
                        });

                    }
                    
                }

            });
        });
    });
</script>



//Datatable script and links both are same for both table

 <table class="table table-condensed table-bordered table-hover" id="tbl_issue_Table" cellspacing="0">
            <thead id="reportTableHeader">
                <tr class="uiTableHeader">
                    <th>Issue ID</th>
                    <th>Pbs Name</th>
                    <th>Office Name</th>
                    <th>Problem Name</th>
                    <th>Status</th>
                    <th>Resolver Name</th>
                    <th>OPS Name</th>
                    <th>Audio Record</th>
                </tr>
            </thead>
            <tbody id="rowBody">

            </tbody>
        </table>

Answer 1

如果使用DataTables，则不应直接附加数据，而是使用本机函数。在ajax success函数中获得响应数据后，通过rows.add() function传递它。我根据您的第一个表格创建了一个示例（https://jsfiddle.net/zr1mpqu0/），展示了如何在表格中清除和添加新数据：

$('#example').on('click', function(){
    table.clear();
    table.row.add(["001", "Anusha", "India", "10000"]).draw();
});

jQuery数据表不起作用（任何选项单击它显示“表中没有可用数据”）和动态表

1 个答案: