使用ajax時如何處理JQuery DataTable中的空值

Question

我的頁面嘗試加載DataTable時出現以下錯誤：

DataTables警告：表id = table1-請求的未知參數'0'為行0，列0。有關此錯誤的更多信息，請參見http://datatables.net/tn/4

當我使用隨機值的虛擬數據集時，表加載工作正常，但是我要顯示的數據具有許多空值，這可能就是問題出現的原因。 我想知道如何最好地設置DataTable設置，以便識別空值並將其顯示為空字符串。

我嘗試添加一個渲染函數來解決該問題（改編自在datatablesoficial 論壇上的注釋中描述的示例），但是它目前無法正常工作，我不確定如何最好地實現它，或者不確定是否會更好完全使用另一種方法。

jQuery的：

function setupData() {
    $(document).ready(function () {
        $('#table1').dataTable({
            "dom": 'B<clear>frtip',
            "buttons": [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ],
            "lengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
            "scrollX": true,
            "scrollY": true,
            "ajax": {
                "url": "/index_get_data",
                "dataType": "json",
                "dataSrc": "data",
                "contentType": "application/json"
            },
            responsive: true
        });
    });
}
$(window).on("load", setupData);

的HTML：

<table contenteditable='true' id="table1" class="tableBody dataTable table-striped table-bordered nowrap display" style="width:100%" >
    <thead>
        <tr>
            {%  for item in cols %}
                <th>{{ item }}</th>
            {% endfor %}
        </tr>
    </thead>
</table>

我添加到dataTable聲明中的渲染函數，但無法正常工作：

"render": function jsRenderCOL(data, type, row, meta) {
    var dataRender;
    if (data == null) {
        dataRender = "";
    }
    return dataRender;
}

有超過130列（這可以是可變的），並且數據每天都會更新，許多列可能包含空數據。 我想找到一種方法來顯示dataTable中的數據，而不必在dataTable函數中顯式聲明列。 感謝您的任何幫助，您可以提供。

Answer 1

您不必擔心ajax數據使用此代碼

  $('.dataTable').dataTable({ destroy: true, paging: true, searching: true, sort: true, "ajax": { url: '{{ url('users/datatable')}}', type: 'POST', headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }, 'data':{} }, "columns": [ {data: 'id'}, {data: 'name'}, {data: 'email'}, {data: 'membership_no'}, {data: 'is_active'}, {data: 'varsity_session'}, {data: 'due_amount'}, {data: 'paid_amount'}, {data: 'created_at'}, {data: 'last_transaction_date'}, {data: 'action'}, ], "columnDefs": [ {"bSortable": false, "targets": [1, 6]}, {"searchable": false, "targets": [4, 6]} ], lengthMenu: [[10, 50, 100, -1], [10, 50, 100, "All"]], pageLength: 10, "dom": 'Blfrtip', buttons: [ { extend: 'copy', text: 'copy', className: 'btn btn-primary', exportOptions: { columns: 'th:not(:last-child)' } }, { extend: 'csv', text: 'csv', className: 'btn btn-warning', exportOptions: { columns: 'th:not(:last-child)' } }, { extend: 'excel', text: 'excel', className: 'btn btn-danger', exportOptions: { columns: 'th:not(:last-child)' } }, { extend: 'pdf', text: 'pdf', className: 'btn btn-success', exportOptions: { columns: 'th:not(:last-child)' } }, { extend: 'print', text: 'print', className: 'btn btn-btn-info', exportOptions: { columns: 'th:not(:last-child)' } } ] }); }); 

Answer 2

您可以嘗試在初始化時將每一列的defaultContent設置為空字符串，即

$('#table1').dataTable( {
  "columnDefs": [ {
      "targets": (pass a variable in here that you have calculated based on the number of columns to render) 
      "defaultContent": ""
    } ]
} );

對於targets屬性，請傳入定義列索引的變量。