dataTables无法在我的本地环境中实时更新，但在公司开发服务器上可以正常工作

Question

我们正在使用jQuery插件“ dataTables”创建实时数据网格。很好，但是我有一个奇怪的问题。

在每列的页脚中都有一个过滤器，当您选择一个值时，应该过滤所有条目以仅显示与该值匹配的条目。在公司开发人员网站上，我的页面运行良好。但是，当我将其加载到本地环境中时，该页面不会实时更新，并且仅当我单击“显示下一个/上一个10个条目”按钮时，该过滤器才适用。

我在这里粘贴我的jQuery代码，但问题可能出在其他地方，但我不知道在哪里。就像我说的那样，这在网站上可以正常工作，只会给我在本地计算机上的问题。让我知道是否还有其他内容应粘贴在这里。

谢谢！

(function(){
function findColWidths(table){
    var colWidths = {};

    function analyzeWidths(index, value){
           var rowCols = $(this).find('td');
           for(var i=0;i<rowCols.length;i++){
               var cell = $(rowCols[i]);
               if(colWidths[i] == null || colWidths[i] == undefined){
                    colWidths[i] =  cell.html().length;
               }else{
                    colWidths[i] = Math.max(colWidths[i], cell.html().length);
               }
           }
    }

    $(table).find('tbody').find('tr').each(analyzeWidths);
    $(table).find('thead').find('tr').each(analyzeWidths);

    return colWidths;
}

$.fn.dataTable.moment( 'MMM D YYYY' );

var companyName = "{{company_name}}";
var dataTable = $('.dataTable').DataTable({
    buttons: [ 
        'copy', 
        'csv', 
        {
            extend: 'excel',
            footer: false,
            customize: function (xlsx) {
                            var colWidths = findColWidths($('.dataTable'));
                            var sheet = xlsx.xl.worksheets['sheet1.xml'];
                            var col = $('col', sheet);
                            col.each(function (index, value) {
                                  $(this).attr('width', colWidths[index]+10);
                           });
                        }
        },
        {
            extend: 'pdf',
            title: 'Report',
            customize: function(doc_object){
                //console.log(doc_object);
            }
        },
        'colvis'
    ],
    initComplete: WIM.dataTableInitComplete,
    columnDefs: [
        { "type": "severity", targets: 3 }
    ]

});

WIM.dataTables = dataTable;

var filter = $('#incidentTable_filter', dataTable.table().container());
var container = dataTable.buttons().container();
var buttons = {
    'copy': {
        'class': 'fa-copy',
        'title': 'Copy'
    },
    'csv': {
        'class': 'fa-table',
        'title': 'CSV'
    },
    'excel': {
        'class': 'fa-file-excel-o',
        'title': 'Excel'
    },
    'pdf': {
        'class': 'fa-file-pdf-o',
        'title': 'PDF'
    },
    'colvis': {
        'class': 'fa-columns',
        'title': 'Column Visibility'
    }
};

for(var btnName in buttons){
    var btn = container.find('.buttons-'+btnName);
    btn.html('<i class="fa '+buttons[btnName]['class']+'" aria-hidden="true"></i>');
    btn.attr('title',buttons[btnName]['title']);
}

dataTable.buttons().container().insertBefore( filter );
dataTable.buttons().container().css({'float':'right', 'padding-left':'10px'});

$('.dataTable').on('click', 'tr', function(e){
   var url = this.getAttribute('data-url');
   if(url !== undefined && url !== null){
        window.location = url;
   }
});


dataTable.on( 'column-visibility.dt', function ( e, settings, column, state ) {
    localStorage.setItem("wim:incident_list:visibility:"+column, (state ? 'visible' : 'hidden'));
} );

for (var key in localStorage){
    if(key.indexOf("wim:incident_list:visibility") == 0){
       var value = localStorage.getItem(key);
       var column = parseInt(key.split(':')[3]);
       if(value == 'hidden'){
           dataTable.column( column ).visible( false );
       }
    }
}

var tableElement = $("#incidentTable");

var smap = new WIM.SortOrderMap("incident_list", dataTable);
smap.initialize();
tableElement.on('click','th',function(element){
    smap.add($(this).index());
});


var colNum = {% if isCompanyUser %} 7{% else %} 8{%endif%};
dataTable.columns(colNum).search('Active').draw();
var cells = tableElement.find('tfoot').find('th');
var cell = $(cells[colNum]);
var select = cell.find('select');
var options = select.find('option');
for(var i=0, len = options.length; i<len;i++){
   if( $(options[i]).val() == 'Active'){
       select.prop('selectedIndex', i);
       break;
   }
}

var selectedMap = new WIM.SelectMap("incident_list", tableElement);
selectedMap.initialize();

tableElement.find("select").change(function(){
    var $select = $(this);
    var columnIndex = $select.parent().index();
    var selected = $select.find("option:selected");
    var selectedValue = selected.text();
    if(selectedValue == ""){
        selectedMap.remove(columnIndex);
    }else{
        selectedMap.add(columnIndex, selectedValue);
    }
});

}）（）;