javascript - 添加具有未知请求参数的行时 jQuery DataTable 失败

Question

我有一个数据表，我想通过调用服务并在其中添加新行来重绘它。

为此，我使用了以下代码:

$(function() {
    var dataFromService = [{
        "ScheduleId": 1324,
        "Started": "26 Oct 2018 06:12:17",
        "EstimatedCompletionTime": "26 Oct 2018 10:12:49",
        "EstTimeToComplete": 240,
        "NoDelScheduled": 3,
        "NoPartsScheduled": 11,
        "NoSheetsScheduled": 534,
        "NoPartsPrepared": 5,
        "NoSheetsPicked": 312,
        "NoBlocksUsed": 64,
        "NoPalletsUsed": 3,
        "SheetsPerMin": 1.3,
        "SecondsPerSheet": 46.15
    }];

    $('#btnRedraw').on('click', function() {


        var datatable = $('#testDataTable001').DataTable();
        datatable.clear();
        datatable.rows.add(dataFromService);
        datatable.draw();
        //console.log(datatable);
    });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<div class="dataTables_scroll">
    <div class="dataTables_scrollHead" style="overflow: hidden; position: relative; border: 0px; width: 100%;">
        <div class="dataTables_scrollHeadInner" style="box-sizing: content-box; width: 2606px; padding-right: 0px;">
            <table class="table table-hover dataTable" role="grid" style="margin-left: 0px; width: 2606px;">
                <thead>
                    <tr role="row">
                        <th class="sorting" tabindex="0" aria-controls="testDataTable001" rowspan="1" colspan="1" style="width: 162px;" aria-label="ScheduleId: activate to sort column ascending">ScheduleId</th>
                        <th class="sorting" tabindex="0" aria-controls="testDataTable001" rowspan="1" colspan="1" style="width: 162px;" aria-label="Started: activate to sort column ascending">Started</th>
                        <th class="sorting" tabindex="0" aria-controls="testDataTable001" rowspan="1" colspan="1" style="width: 168px;" aria-label="EstimatedCompletionTime: activate to sort column ascending">EstimatedCompletionTime</th>
                        <th class="sorting" tabindex="0" aria-controls="testDataTable001" rowspan="1" colspan="1" style="width: 162px;" aria-label="EstTimeToComplete: activate to sort column ascending">EstTimeToComplete</th>
                        <th class="sorting" tabindex="0" aria-controls="testDataTable001" rowspan="1" colspan="1" style="width: 162px;" aria-label="NoDelScheduled: activate to sort column ascending">NoDelScheduled</th>
                        <th class="sorting" tabindex="0" aria-controls="testDataTable001" rowspan="1" colspan="1" style="width: 162px;" aria-label="NoPartsScheduled: activate to sort column ascending">NoPartsScheduled</th>
                        <th class="sorting" tabindex="0" aria-controls="testDataTable001" rowspan="1" colspan="1" style="width: 162px;" aria-label="NoSheetsScheduled: activate to sort column ascending">NoSheetsScheduled</th>
                        <th class="sorting" tabindex="0" aria-controls="testDataTable001" rowspan="1" colspan="1" style="width: 162px;" aria-label="NoPartsPrepared: activate to sort column ascending">NoPartsPrepared</th>
                        <th class="sorting" tabindex="0" aria-controls="testDataTable001" rowspan="1" colspan="1" style="width: 162px;" aria-label="NoSheetsPicked: activate to sort column ascending">NoSheetsPicked</th>
                        <th class="sorting" tabindex="0" aria-controls="testDataTable001" rowspan="1" colspan="1" style="width: 162px;" aria-label="NoBlocksUsed: activate to sort column ascending">NoBlocksUsed</th>
                        <th class="sorting" tabindex="0" aria-controls="testDataTable001" rowspan="1" colspan="1" style="width: 162px;" aria-label="NoPalletsUsed: activate to sort column ascending">NoPalletsUsed</th>
                        <th class="sorting" tabindex="0" aria-controls="testDataTable001" rowspan="1" colspan="1" style="width: 162px;" aria-label="SheetsPerMin: activate to sort column ascending">SheetsPerMin</th>
                        <th class="sorting" tabindex="0" aria-controls="testDataTable001" rowspan="1" colspan="1" style="width: 162px;" aria-label="SecondsPerSheet: activate to sort column ascending">SecondsPerSheet</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    <div class="dataTables_scrollBody" style="position: relative; overflow: auto; max-height: 26vh; width: 100%;">
        <table id="testDataTable001" class="table table-hover dataTable" role="grid" style="width: 100%;">
            <thead>
                <tr role="row" style="height: 0px;">
                    <th class="sorting" aria-controls="testDataTable001" rowspan="1" colspan="1" style="width: 162px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="ScheduleId: activate to sort column ascending">
                        <div class="dataTables_sizing" style="height: 0px; overflow: hidden;">ScheduleId</div>
                    </th>
                    <th class="sorting" aria-controls="testDataTable001" rowspan="1" colspan="1" style="width: 162px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Started: activate to sort column ascending">
                        <div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Started</div>
                    </th>
                    <th class="sorting" aria-controls="testDataTable001" rowspan="1" colspan="1" style="width: 168px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="EstimatedCompletionTime: activate to sort column ascending">
                        <div class="dataTables_sizing" style="height: 0px; overflow: hidden;">EstimatedCompletionTime</div>
                    </th>
                    <th class="sorting" aria-controls="testDataTable001" rowspan="1" colspan="1" style="width: 162px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="EstTimeToComplete: activate to sort column ascending">
                        <div class="dataTables_sizing" style="height: 0px; overflow: hidden;">EstTimeToComplete</div>
                    </th>
                    <th class="sorting" aria-controls="testDataTable001" rowspan="1" colspan="1" style="width: 162px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="NoDelScheduled: activate to sort column ascending">
                        <div class="dataTables_sizing" style="height: 0px; overflow: hidden;">NoDelScheduled</div>
                    </th>
                    <th class="sorting" aria-controls="testDataTable001" rowspan="1" colspan="1" style="width: 162px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="NoPartsScheduled: activate to sort column ascending">
                        <div class="dataTables_sizing" style="height: 0px; overflow: hidden;">NoPartsScheduled</div>
                    </th>
                    <th class="sorting" aria-controls="testDataTable001" rowspan="1" colspan="1" style="width: 162px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="NoSheetsScheduled: activate to sort column ascending">
                        <div class="dataTables_sizing" style="height: 0px; overflow: hidden;">NoSheetsScheduled</div>
                    </th>
                    <th class="sorting" aria-controls="testDataTable001" rowspan="1" colspan="1" style="width: 162px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="NoPartsPrepared: activate to sort column ascending">
                        <div class="dataTables_sizing" style="height: 0px; overflow: hidden;">NoPartsPrepared</div>
                    </th>
                    <th class="sorting" aria-controls="testDataTable001" rowspan="1" colspan="1" style="width: 162px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="NoSheetsPicked: activate to sort column ascending">
                        <div class="dataTables_sizing" style="height: 0px; overflow: hidden;">NoSheetsPicked</div>
                    </th>
                    <th class="sorting" aria-controls="testDataTable001" rowspan="1" colspan="1" style="width: 162px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="NoBlocksUsed: activate to sort column ascending">
                        <div class="dataTables_sizing" style="height: 0px; overflow: hidden;">NoBlocksUsed</div>
                    </th>
                    <th class="sorting" aria-controls="testDataTable001" rowspan="1" colspan="1" style="width: 162px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="NoPalletsUsed: activate to sort column ascending">
                        <div class="dataTables_sizing" style="height: 0px; overflow: hidden;">NoPalletsUsed</div>
                    </th>
                    <th class="sorting" aria-controls="testDataTable001" rowspan="1" colspan="1" style="width: 162px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="SheetsPerMin: activate to sort column ascending">
                        <div class="dataTables_sizing" style="height: 0px; overflow: hidden;">SheetsPerMin</div>
                    </th>
                    <th class="sorting" aria-controls="testDataTable001" rowspan="1" colspan="1" style="width: 162px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="SecondsPerSheet: activate to sort column ascending">
                        <div class="dataTables_sizing" style="height: 0px; overflow: hidden;">SecondsPerSheet</div>
                    </th>
                </tr>
            </thead>
            <tfoot>
                <tr style="height: 0px;">
                    <th rowspan="1" colspan="1" style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 184px;">
                        <div class="dataTables_sizing" style="height: 0px; overflow: hidden;"><input name="ScheduleId" data-index="0" class="form-control js-footer-search" type="text" placeholder="Search"></div>
                    </th>
                    <th rowspan="1" colspan="1" style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 184px;">
                        <div class="dataTables_sizing" style="height: 0px; overflow: hidden;"><input name="Started" data-index="1" class="form-control js-footer-search" type="text" placeholder="Search"></div>
                    </th>
                    <th rowspan="1" colspan="1" style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 190px;">
                        <div class="dataTables_sizing" style="height: 0px; overflow: hidden;"><input name="EstimatedCompletionTime" data-index="2" class="form-control js-footer-search" type="text" placeholder="Search"></div>
                    </th>
                    <th rowspan="1" colspan="1" style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 184px;">
                        <div class="dataTables_sizing" style="height: 0px; overflow: hidden;"><input name="EstTimeToComplete" data-index="3" class="form-control js-footer-search" type="text" placeholder="Search"></div>
                    </th>
                    <th rowspan="1" colspan="1" style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 184px;">
                        <div class="dataTables_sizing" style="height: 0px; overflow: hidden;"><input name="NoDelScheduled" data-index="4" class="form-control js-footer-search" type="text" placeholder="Search"></div>
                    </th>
                    <th rowspan="1" colspan="1" style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 184px;">
                        <div class="dataTables_sizing" style="height: 0px; overflow: hidden;"><input name="NoPartsScheduled" data-index="5" class="form-control js-footer-search" type="text" placeholder="Search"></div>
                    </th>
                    <th rowspan="1" colspan="1" style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 184px;">
                        <div class="dataTables_sizing" style="height: 0px; overflow: hidden;"><input name="NoSheetsScheduled" data-index="6" class="form-control js-footer-search" type="text" placeholder="Search"></div>
                    </th>
                    <th rowspan="1" colspan="1" style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 184px;">
                        <div class="dataTables_sizing" style="height: 0px; overflow: hidden;"><input name="NoPartsPrepared" data-index="7" class="form-control js-footer-search" type="text" placeholder="Search"></div>
                    </th>
                    <th rowspan="1" colspan="1" style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 184px;">
                        <div class="dataTables_sizing" style="height: 0px; overflow: hidden;"><input name="NoSheetsPicked" data-index="8" class="form-control js-footer-search" type="text" placeholder="Search"></div>
                    </th>
                    <th rowspan="1" colspan="1" style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 184px;">
                        <div class="dataTables_sizing" style="height: 0px; overflow: hidden;"><input name="NoBlocksUsed" data-index="9" class="form-control js-footer-search" type="text" placeholder="Search"></div>
                    </th>
                    <th rowspan="1" colspan="1" style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 184px;">
                        <div class="dataTables_sizing" style="height: 0px; overflow: hidden;"><input name="NoPalletsUsed" data-index="10" class="form-control js-footer-search" type="text" placeholder="Search"></div>
                    </th>
                    <th rowspan="1" colspan="1" style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 184px;">
                        <div class="dataTables_sizing" style="height: 0px; overflow: hidden;"><input name="SheetsPerMin" data-index="11" class="form-control js-footer-search" type="text" placeholder="Search"></div>
                    </th>
                    <th rowspan="1" colspan="1" style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 184px;">
                        <div class="dataTables_sizing" style="height: 0px; overflow: hidden;"><input name="SecondsPerSheet" data-index="12" class="form-control js-footer-search" type="text" placeholder="Search"></div>
                    </th>
                </tr>
            </tfoot>
            <tbody>
                <tr role="row" class="odd">
                    <td>1324</td>
                    <td>26 Oct 2018 06:12:17</td>
                    <td>26 Oct 2018 10:12:49</td>
                    <td>240</td>
                    <td>3</td>
                    <td>11</td>
                    <td>534</td>
                    <td>5</td>
                    <td>312</td>
                    <td>64</td>
                    <td>3</td>
                    <td>1.3</td>
                    <td>46.15</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="dataTables_scrollFoot" style="overflow: hidden; border: 0px; width: 100%;">
        <div class="dataTables_scrollFootInner" style="width: 2606px; padding-right: 0px;">
            <table class="table table-hover dataTable" role="grid" style="margin-left: 0px; width: 2606px;">
                <tfoot>
                    <tr>
                        <th rowspan="1" colspan="1" style="width: 184px;"><input name="ScheduleId" data-index="0" class="form-control js-footer-search" type="text" placeholder="Search"></th>
                        <th rowspan="1" colspan="1" style="width: 184px;"><input name="Started" data-index="1" class="form-control js-footer-search" type="text" placeholder="Search"></th>
                        <th rowspan="1" colspan="1" style="width: 190px;"><input name="EstimatedCompletionTime" data-index="2" class="form-control js-footer-search" type="text" placeholder="Search"></th>
                        <th rowspan="1" colspan="1" style="width: 184px;"><input name="EstTimeToComplete" data-index="3" class="form-control js-footer-search" type="text" placeholder="Search"></th>
                        <th rowspan="1" colspan="1" style="width: 184px;"><input name="NoDelScheduled" data-index="4" class="form-control js-footer-search" type="text" placeholder="Search"></th>
                        <th rowspan="1" colspan="1" style="width: 184px;"><input name="NoPartsScheduled" data-index="5" class="form-control js-footer-search" type="text" placeholder="Search"></th>
                        <th rowspan="1" colspan="1" style="width: 184px;"><input name="NoSheetsScheduled" data-index="6" class="form-control js-footer-search" type="text" placeholder="Search"></th>
                        <th rowspan="1" colspan="1" style="width: 184px;"><input name="NoPartsPrepared" data-index="7" class="form-control js-footer-search" type="text" placeholder="Search"></th>
                        <th rowspan="1" colspan="1" style="width: 184px;"><input name="NoSheetsPicked" data-index="8" class="form-control js-footer-search" type="text" placeholder="Search"></th>
                        <th rowspan="1" colspan="1" style="width: 184px;"><input name="NoBlocksUsed" data-index="9" class="form-control js-footer-search" type="text" placeholder="Search"></th>
                        <th rowspan="1" colspan="1" style="width: 184px;"><input name="NoPalletsUsed" data-index="10" class="form-control js-footer-search" type="text" placeholder="Search"></th>
                        <th rowspan="1" colspan="1" style="width: 184px;"><input name="SheetsPerMin" data-index="11" class="form-control js-footer-search" type="text" placeholder="Search"></th>
                        <th rowspan="1" colspan="1" style="width: 184px;"><input name="SecondsPerSheet" data-index="12" class="form-control js-footer-search" type="text" placeholder="Search"></th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>

<button type="button" id="btnRedraw">Re-draw</button>

这是 http://jsfiddle.net/dpjx8em2/

Answer 1

$(function() {
  var datatable = $('#testDataTable001').DataTable({
  columns:[
           {data: 'ScheduleId'},
           {data: "Started"},
           {data: "EstimatedCompletionTime"},
           {data: "EstTimeToComplete"},
           {data: "NoDelScheduled"},
           {data: "NoPartsScheduled"},
           {data: "NoSheetsScheduled"},
           {data: "NoPartsPrepared"},
           {data: "NoSheetsPicked"},
           {data: "NoBlocksUsed"},
           {data: "NoPalletsUsed"},
           {data: "SheetsPerMin"},
           {data: "SecondsPerSheet"}]
  });
    var dataFromService = [{
        "ScheduleId": 1324,
        "Started": "26 Oct 2018 06:12:17",
        "EstimatedCompletionTime": "26 Oct 2018 10:12:49",
        "EstTimeToComplete": 240,
        "NoDelScheduled": 3,
        "NoPartsScheduled": 11,
        "NoSheetsScheduled": 534,
        "NoPartsPrepared": 5,
        "NoSheetsPicked": 312,
        "NoBlocksUsed": 64,
        "NoPalletsUsed": 3,
        "SheetsPerMin": 1.3,
        "SecondsPerSheet": 46.15
    }];

    $('#btnRedraw').on('click', function() {    
       // datatable.clear();
        datatable.rows.add(dataFromService);
        datatable.draw();
        //console.log(datatable);
    });
})

<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table id="testDataTable001" class="display" style="width:100%">
        <thead>
            <tr>
                <th>ScheduleId</th>
                <th>Started</th>
                <th>EstimatedCompletionTime</th>
                <th>EstTimeToComplete</th>
                <th>NoDelScheduled</th>
                <th>NoPartsScheduled</th>
                <th>NoSheetsScheduled</th>
                <th>NoPartsPrepared</th>
                <th>NoSheetsPicked</th>
                <th>NoBlocksUsed</th>
                <th>NoPalletsUsed</th>
                <th>SheetsPerMin</th>
                <th>SecondsPerSheet</th>
            </tr>
        </thead>
        <tbody>
        
                <tr role="row" class="odd">
                    <td>1321</td>
                    <td>26 Oct 2018 06:12:17</td>
                    <td>26 Oct 2018 10:12:49</td>
                    <td>240</td>
                    <td>3</td>
                    <td>11</td>
                    <td>534</td>
                    <td>5</td>
                    <td>312</td>
                    <td>64</td>
                    <td>3</td>
                    <td>1.3</td>
                    <td>46.15</td>
                </tr>

        </tbody>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>


<button type="button" id="btnRedraw">Re-draw</button>

保持 DataTable 实例在需要时全局重用该对象。单击按钮时不需要 datatable.clear();。