javascript - 覆盖数据表错误

Question

我有这段 JavaScript 代码。

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.2.1/css/buttons.dataTables.min.css">

<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.2.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>

<script type="text/javascript" language="javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js
"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/buttons/1.2.1/js/buttons.html5.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/buttons/1.2.1/js/buttons.colVis.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/buttons/1.2.1/js/buttons.print.min.js"></script>

<script type="text/javascript" language="javascript" class="init">

$(document).ready(function() {
    function getNameSpecsSize(data, type, dataToSet) {
        return data[3] + ", " + data[4] + ", " + data[5];
    }

    function getWOandSheet(data, type, dataToSet) {
        return data[10] + " / " + data[11];
    }
    
    var table = $('#material_used').dataTable( {
        "aProcessing": true,
        "aServerSide": true,
        "scrollY": 350,
        "scrollX": true,
        "deferRender": true,
        "sAjaxSource": "Scripts/server-response-mat-used.php",
        "fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
            oSettings.jqXHR = $.ajax( {
                "dataType": 'json',
                "type": "POST",
                "url": sSource,
                "data": aoData,
                "success": fnCallback,
                "error": function () {
                    alert( 'No data available / No matching records found' );
                    window.history.back();
                }
            })
        },
        "aoColumns": [
                {"data": "1", "sClass": "align_center"},
                {"data": "2", "sClass": "align_center"},
                {"data": getNameSpecsSize, "sClass": "align_center"},
                {"data": "6", "sClass": "align_center"},
                {"data": "7", "sClass": "align_center"},
                {"data": "8", "sClass": "align_center"},
                {"data": "9", "sClass": "align_center"},
                {"data": getWOandSheet, "sClass": "align_center"},
                { "mData": null , //its null here because history column will contain the mRender
                "mRender" : function ( data, type, full ) {
                    return '<a href="link.php?c='+data[0]+'">Edit</a> / <a href="link.php?c='+data[0]+'">Delete</a>';}
                }
            ],
        "aaSorting": [[0,'desc']],
        dom: 'Bfrtip',
        lengthMenu: [
            [ -1 ],
            [ 'Show all' ]
        ],
        buttons: [
            'pageLength',
            'print',
            'copyHtml5',
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5',
            'colvis'
        ]
    });
});

</script>

<style type="text/css">
    .align_right { text-align: right; }
    .align_center { text-align: center; }
</style>

<table id="material_used" class="display" cellspacing="0" width="100%">
<thead>
<tr>
    <th width="10%"><div align="center"><font size="2">A</font></div></th>
    <th width="8%"><div align="center"><font size="2">B</font></div></th>
    <th width="15%"><div align="center"><font size="2">C, D, E</font></div></th>
    <th width="3%"><div align="center"><font size="2">F</font></div></th>
    <th width="10%"><div align="center"><font size="2">L</font></div></th>
    <th width="15%"><div align="center"><font size="2">G</font></div></th>
    <th width="15%"><div align="center"><font size="2">H</font></div></th>
    <th width="15%"><div align="center"><font size="2">I / J</font></div></th>
    <th width="10%"><div align="center"><font size="2">K</font></div></th>
</tr>
</thead>
</table>

我在本地主机服务器中显示错误消息没有可用数据/找不到匹配记录，但是当我在服务器上运行代码时，错误不会显示。

任何帮助将不胜感激。

问候。

Answer 1

似乎 DataTables fnServerData 在我的服务器中不起作用，因此我使用了 AJAX 代码来检查 url 的响应是否为我提供了 null 响应或在页面加载/准备就绪时不进行。

所以这是代码:

$(document).ready(function() {
$.ajax({
        type: "POST",
        url: "server-response.php",
        cache: false,
        success: function(response){
            console.log(response);
            if (response == "null"){
                alert( 'No data available / No matching records found' );
                    window.history.back();
            }
        }
    });
 });

当页面准备好时，脚本将发送 POST 请求并从 url 读取响应。如果我得到 null 响应，则会弹出警报对话框，并且在 DataTables 发送 AJAX 并将 JSON 响应(为 null)读取到我在代码中使用的相同 url 之前，页面将自动重定向到上一页，因此错误消息来自 DataTables 的数据将不会显示。