覆盖DataTables错误

时间:2016-08-26 15:25:36

标签: javascript jquery ajax datatables

我有这个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>

我在localhost服务器上显示错误消息无可用数据/找不到匹配的记录,但是当我在服务器上运行代码时,错误将不会显示。

非常感谢任何帮助。

问候。

1 个答案:

答案 0 :(得分:0)

似乎DataTables fnServerData 在我的服务器上没有工作,所以我附带了AJAX代码,检查网址的响应是否给了我 null < / em>在页面加载/准备好时是否响应。

所以这里是代码:

&#13;
&#13;
$(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();
            }
        }
    });
 });
&#13;
&#13;
&#13;

当页面准备就绪时,脚本将发送POST请求并从URL读取响应。如果我得到null响应,将弹出警告对话框,页面将自动重定向到上一页,然后DataTables发送AJAX并读取JSON响应(为空)到我在代码中使用的相同url,因此错误消息来自DataTables不会出现。