Две таблицы данных jQuery - попытка перезагрузить, показать/скрыть столбцы и т. Д. - сбой для одной из таблиц данных, но не другой

Question

У меня есть два объекта DataTables на странице, которые позволяют называть их поискомРезультатыТаблица и текущий портфолио. Я использую плагин fnReloadAjax, чтобы перезагрузить DataTables по требованию, когда я нажимаю кнопку. Однако только одна из таблиц загружает новые данные (currentPortfolioTable), searchResultsTable выполняет запросы ajax для данных, но не загружает новые (и действительные) данные в таблицу.

Я попытался уничтожить DataTable и создать новый и даже переделать части плагина fnReloadAjax, чтобы увидеть, могу ли я произвести другой результат.

Даже если вызывается только fnReloadAjax для currentPortfolioTable, он отказывается отображать новые загруженные данные.

Проблема поискаРезультатыТаблица, не загружающая новые данные, также возникает при отображении/скрытии столбцов с использованием состояния bVisible свойства aoColumns DataTable.

Пример кода:

var dataTableObjects = dataTableObjects || { 
    "searchResultsTable": {}, 
    "currentPortfolioTable": {} 
}; 

var _rankingsRootUrl = window.ROOT + 'rankings/'; 

var _defaultDataTableSettings = { 
    "aoColumns": [ 
     { "bSortable": false, 
      "sTitle": "Add to Portfolio", 
      "bVisible": true 
     }, 
     { 
      "bSortable": true, 
      "sTitle": "Name of Investment", 
      "bVisible": true 
     }, 
     { "bSortable": true, 
      "sTitle": "Chart", 
      "bVisible": true 
     }, 
     { "bSortable": true, 
      "sTitle": "Rating", 
      "bVisible": true 
     }, 
     { "bSortable": true, 
      "sTitle": "Minimum", 
      "bVisible": true 
     }, 
     { "bSortable": true, 
      "sTitle": "ROR", 
      "bVisible": false 
     }, 
     { "bSortable": true, 
      "sTitle": "Max DD", 
      "bVisible": false 
     }, 
     { "bSortable": true, 
      "sTitle": "Sharpe", 
      "bVisible": false 
     }, 
     { "bSortable": true, 
      "sTitle": "Sterling", 
      "bVisible": false 
     } 
    ], 
    "aaSorting": [ 
    ], 
    "sAjaxSource": _rankingsRootUrl + 'search_results/', 
    "bServerSide": true, 
    "bProcessing": true, 
    "bPaginate": false, 
    "bLengthChange": false, 
    "sScrollY": 200, 
    "sScrollX": "100%", 
    "sScrollXInner": "100%", 
    "bScrollCollapse": true, 
    "fnServerData": function (sSource, aoData, fnCallback) { 
     $.ajax({ 
      "dataType": 'json', 
      "type": "POST", 
      "url": sSource, 
      "data": aoData, 
      "success": fnCallback 
     }); 
    }, 
    "fnServerParams": function (aoData) { 
     aoData.push(
      {"name": "program_type", "value": $(':input#RankingProgramType').val()}, 
      {"name": "program_name", "value": $(':input#RankingProgramName').val()}, 
      {"name": "min_investment", "value": $(':input#RankingMinimumInvestment').val()}, 
      {"name": "rate_of_return", "value": $(':input#RankingRateOfReturn').val()}, 
      {"name": "max_dd", "value": $(':input#RankingMaxDd').val()}, 
      {"name": "time_span", "value": $(':input#RankingTimeSpan').val()}, 
      {"name": "flags", "value": $(':input#RankingFlags').val()}, 
      {"name": "strategies", "value": $(':input#RankingStrategies').val()}, 
      {"name": "recommended", "value": $(':input#RankingRecommended').val()}, 
      {"name": "portfolio_id", "value": (window.PORTFOLIO && window.PORTFOLIO.id) || ""} 
     ); 
    } 
}; 

var _defaultCurrentPortfolioTableSettings = { 
    "aoColumns": [ 
     { 
      "bSortable": true, 
      "sTitle": "Name of Investment", 
      "bVisible": true 
     }, 
     { "bSortable": true, 
      "sTitle": "Chart", 
      "bVisible": true 
     }, 
     { "bSortable": true, 
      "sTitle": "Rating", 
      "bVisible": true 
     }, 
     { "bSortable": true, 
      "sTitle": "Minimum", 
      "bVisible": true 
     }, 
     { "bSortable": true, 
      "sTitle": "ROR", 
      "bVisible": false 
     }, 
     { "bSortable": true, 
      "sTitle": "Max DD", 
      "bVisible": false 
     }, 
     { "bSortable": true, 
      "sTitle": "Sharpe", 
      "bVisible": false 
     }, 
     { "bSortable": true, 
      "sTitle": "Sterling", 
      "bVisible": false 
     } 
    ], 
    "aaSorting": [ 
    ], 
    "sAjaxSource": _rankingsRootUrl + 'current_portfolio/', 
    "bServerSide": true, 
    "bProcessing": true, 
    "bPaginate": false, 
    "bLengthChange": false, 
    "sScrollY": 200, 
    "sScrollX": "100%", 
    "sScrollXInner": "100%", 
    "bScrollCollapse": true, 
    "fnServerData": function (sSource, aoData, fnCallback) { 
     $.ajax({ 
      "dataType": 'json', 
      "type": "POST", 
      "url": sSource, 
      "data": aoData, 
      "success": fnCallback 
     }); 
    }, 
    "fnServerParams": function (aoData) { 
     aoData.push(
      {"name": "portfolio_id", "value": (window.PORTFOLIO && window.PORTFOLIO.id) || ""} 
     ); 
    } 
}; 

dataTableObjects.searchResultsTable = $('#search-results table').dataTable(_defaultDataTableSettings); 
dataTableObjects.currentPortfolioTable = $('#currently-in-portfolio table').dataTable(_defaultCurrentPortfolioTableSettings); 

$("#rankings").on("click", "a.add", function (e){ 
    dataTableObjects.searchResultsTable.fnReloadAjax('/datable1-url'); 
    dataTableObjects.currentPortfolioTable.fnReloadAjax('/datable2-url'); 
    e.preventDefault(); 
}); 

Покушение Исправления:

• Использование метода обратного вызова из fnReloadAjax, чтобы запустить перезагрузку данных для dataTable2
• Проверка, что идентификаторы для каждой таблицы является уникальным
• Проверка того, что dataTableJSObject являются правильными и уникальными таблицами для страницы
• консоль не записывает никаких ошибок или проблем
• JShinted JS, чтобы не гарантировать Js ошибки или ошибки
• Выключено fnReloadAjax dataTableObjects.searchResultsTable и dataTableObjects.currentPortfolioTable еще не перезагружать правильно
• Заменено использованием fnReloadAjax с fnDraw

Answer 1

Решение этой конкретной проблемы состояло в том, что данные, возвращаемые для dataTableObjects.currentPortfolioTable, включали значение sEcho, которое используется DataTable для разбивки на страницы данных, то есть на какой странице данных это. SEcho можно увидеть в example usage of DataTables with Server Side Data.

Значение sEcho для dataTableObjects.currentPortfolioTable всегда было установлено в 1, что, по-видимому, заставило DataTables всегда думать, что данные по-прежнему являются исходным набором данных, а не новыми данными.Увеличение sEcho до значения, переданного в запросе AJAX для новых данных, устранило проблему.

Answer 2

Мысль о том, что вызов fnReloadAjax последовательно на двух разных таблицах может вызвать конфликты для dataTable2, которые он не испытывал бы, если бы он ожидал завершения DataTable 1 загрузки.

Функция fnReloadAjax принимает параметр обратного вызова, который может помочь ...

Например:

dataTableObjects.dataTable1 = $('#search-results table').dataTable(); 
dataTableObjects.dataTable2 = $('#currently-in-portfolio table').dataTable(); 

$("#rankings").on("click", "a.add", function (e){ 
    dataTableObjects.dataTable1.fnReloadAjax('/datable1-url', null, reloadDataTable2, false); 
    e.preventDefault(); 
}); 

// outside of the "ready" block 
var reloadDataTable2 = function() { 
    dataTableObjects.dataTable2.fnReloadAjax('/datable2-url'); 
}; 

Я не проверял это, так что я не знаю точно, что он будет работать ,

Однако я видел этот вопрос, ища решение одной из моих собственных проблем, и я думал, что предлагаю эту идею. Надеюсь это поможет.

Answer 3

Я только что привел пример, который показывает, что он должен работать нормально: http://live.datatables.net/aqazek/edit#javascript,html. Я сделал крошечную настройку fnReloadAjax, чтобы вы могли увидеть эффект перезагрузки моего статического источника данных (просто перепишите одну из ячеек с помощью счетчика), но кроме этого - никаких изменений с сайта DataTables.

Поэтому я думаю, что для оказания дальнейшей помощи нам нужно будет увидеть пример того, что он не работает.

Answer 4

Благодарим за отправку дополнительных деталей исходного кода. Я думаю, что я, возможно, нашли проблему ...

В описании fnReloadAjax плагина Allan Jardine добавил следующее примечание:

Примечание: Для того, чтобы перезарядить данные при использовании обработки на стороне сервера, просто использовать встроенная функция API fnDraw, а не этот плагин.

Теперь, когда я понимаю, что вы подтвердили, что данные запрашиваются из /datable1-url и /datable2-url правильно и что первая таблица данных даже перегрузки правильно при использовании fnReloadAjax; однако, в свете примечания Аллана, и из-за отсутствия лучшего ответа из-за таинственной природы проблемы, я бы сказал, что вполне вероятно, что проблема с вашей текущей реализацией действительно связана с тем, что fnReloadAjax не является подходящим решением для как у вас настроены ваши таблицы.

Я также понимаю, однако, что простое изменение fnReloadAjax к fnDraw, как таблицы установлены прямо сейчас, не собирается, чтобы решить вашу проблему ... время, чтобы получить сложно ...

Вот мое решение :

Start, добавляя эти две строки в верхней части скрипта:

var isInitialLoadTable1 = true; 
var isInitialLoadTable2 = true; 

Далее, в каждом из DataTable настройки переменных, добавьте следующую дополнительную функцию обратного вызова после fnServerParams обратного вызова:

"fnInitComplete": function(oSettings, json) { 
    isInitialLoadTable1 = false; 
} 

Убедитесь, что изменить isInitialLoadTable1 к initialLoadTable2 во второй таблице [и не забудьте запятую после закрывающей фигурной скобки для fnServerParams :-)]

Теперь для trickiness ... в fnServerData Обратный вызов изменить url установку $.ajax вызова следующим образом:

"url": (isInitialLoadTable1 ? sSource : '/datable1-url'), 

Опять же, не забудьте изменить как из 1-х до 2-х лет в этом Заявление на второй DataTable

Наконец, измените событие щелчка на следующее:

$("#rankings").on("click", "a.add", function (e) { 
    dataTableObjects.searchResultsTable.fnDraw(); 
    dataTableObjects.currentPortfolioTable.fnDraw(); 
    e.preventDefault(); 
}); 

Теперь, я не проверял, но реальный тест лежит с кодом и данными.

Надеюсь, это решает проблему.