Определения столбцов Datatables и изменение порядка не применяются после перезагрузки

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

Я также использую плагин ColReorder.

Проблема в том, что я не понимаю, как заставить таблицы данных «перезагрузить» эту локальную переменную новыми данными.

в настройке «aoColums» также есть множество определений, использующих некоторые поля данных для изображений и так далее.

Я изменил некоторые данные в dat var. Попытался заставить datatables поместить его в таблицу. Неудачно. Я не могу найти достойный пример или функцию в API для использования.

если я пытаюсь использовать oTable.fnClearTable() и oTable.fnAddData(data), данные загружаются, но каким-то образом ColReorder не применяется.

myTable = $('#myTable').dataTable({
    "aoColumns": [ ... ],
    "aaSorting": [[1, 'asc']],
    "aaData": data,
    "sScrollY": 200,
    "sScrollX": "100%",
    "sScrollXInner": "150%",
    "bJQueryUI": true,
    "sPaginationType": "full_numbers",
    "sDom": 'R<"H"lfr>t<"F"ip>',
    "iFixedColumns": 3,
    "oColReorder": {
        "aiOrder": [ 0, 8, 2, 3, 4, 5, 6, 7, 1, 9 ]
    }
});

Любые идеи?

EDIT Я сделал рабочий jsFIddle с объяснением всей проблемы. Смотри и пробуй!


javascript php jquery datatables
person Jeroen    schedule 23.04.2013    source источник
comment
вы используете массив json?   -  person Hackerman    schedule 23.04.2013
comment
Нет, это обычный массив с массивами для каждой строки. (нет имен полей, только данные [[ячейка1, ячейка2], [ячейка3, ячейка4]]. У вас работает с json?   -  person Jeroen    schedule 23.04.2013
comment
Вы видели документацию для массивов js? datatables.net/examples/data_sources/js_array.html   -  person Hackerman    schedule 23.04.2013
comment
Да, я действительно создаю такую ​​​​вещь, проблема в том, что я хочу, чтобы datatables перезагружали предоставленный js_array. Если мне нужно сделать функцию, которая выполняет итерацию по строке за строкой, это тоже нормально.   -  person Jeroen    schedule 24.04.2013
comment
пожалуйста, смотрите jsFiddle в редактировании для более подробной информации (рабочий пример с проблемой!)   -  person Jeroen    schedule 24.04.2013
comment
Я думаю, что достигну того, что вы хотите ..... позвольте мне ответить и опубликовать мою версию скрипки   -  person Hackerman    schedule 24.04.2013

Ответы (1)


arrow_upward
1
arrow_downward

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

  • Я помещаю манипуляции с таблицами данных внутри функции и добавляю div без таблицы
  • Затем я вызываю эту функцию
  • При обновлении я очищаю div и добавляю тот же html, что и таблица, до манипуляции с данными и заполнения
  • Затем вызовите функцию, чтобы снова нарисовать все таблицы данных, таким образом плагин ColReorder работает с обновленными данными.

PS: Вот обновленная скрипта для более подробной информации: http://jsfiddle.net/aKuHM/5

Теперь таблица выглядит так:

<div class="Example" id="Example">
<table id="myTable" class="datatable">
 <thead>
 </thead>
   <tbody>
   </tbody>
 <tfoot>
 </tfoot>
</table>
</div>

И ваш JS загружается на голову и выглядит так:

data = [
            ['cell1', 'cell2','cell3','cell4','cell5','cell6','cell17', 'cell8', 'cell9', 'cell10'],
            ['cell1', 'cell2','cell3','cell4','cell5','cell6','cell17', 'cell8', 'cell9', 'cell10'],
            ['cell1', 'cell2','cell3','cell4','cell5','cell6','cell17', 'cell8', 'cell9', 'cell10'],
        ];
        function Saludos(){
        $(function(){
            myTable = $('#myTable').dataTable({
                "aoColumns": [
                    {"sTitle":"col0", "bSearchable": false, "bVisible": true},
                    {"sTitle":"col1", "bSearchable": false, "bVisible": true},
                    {"sTitle":"col2", "bSearchable": true, "bVisible": true},
                    {"sTitle":"col3", "bSearchable": true, "bVisible": true},
                    {"sTitle":"col4", "bSearchable": true, "bVisible": true},
                    {"sTitle":"col5", "bSearchable": false, "bVisible": true},
                    {"sTitle":"col6", "bSearchable": true, "bVisible": true},
                    {"sTitle":"col7", "bSearchable": false, "bVisible": true},
                    {"sTitle":"col8", "bSearchable": true, "bVisible": true,
                        "mRender": function (data, type, row){
                            return '<b><i>'+ row[8] +'</i></b>';
                        }
                    },
                    {"sTitle":"col9", "bSearchable": false, "bVisible": false},
                ],    
                "aaSorting": [[8, 'asc']],
                "aaData": data,
                "sScrollY": 200,
                "sScrollX": "100%",
                "sScrollXInner": "150%",
                "bJQueryUI": true,
                "sPaginationType": "full_numbers",
                "sDom": 'R<"H"lfr>t<"F"ip>',
                "iFixedColumns": 3,
                "oColReorder": {
                    "aiOrder": [ 0, 8, 2, 3, 4, 5, 6, 7, 1, 9 ]
                }
            });

            $('#updatebutton').click(function(){
                updateTable();
            });
        });

        }
        Saludos();
        function updateTable(){
            data[1][8] = "even bolder";
            $('.Example').empty();
            $("#Example").html("<table id='myTable' class='datatable'><thead></thead>  <tbody></tbody><tfoot></tfoot></table>");
            Saludos();
            console.log(data);

        }
person Hackerman    schedule 24.04.2013
comment
Привет Роберт! Хотя я думаю, что выбросить таблицу, воссоздать ее - очень плохой способ «обновления» вещей. Это решение, которое работает. Даже в jsFiddle он работает очень быстро. Если вы используете bStateSave: true, он даже сохраняет изменения между перестроениями. - person Jeroen; 24.04.2013
comment
Да, я тоже так думаю....но это единственное, о чем я мог подумать....и, как вы сказали, работает быстро, и это единственный способ работать с плагином; в основном, потому что вы используете 2 разных способа заполнения таблицы.... это должно быть сделано одинаково, загрузка и обновление.... это должно быть более элегантным способом, но, если вы думаете, что мой ответ работает, не забудьте отметить его как правильный .... привет;) - person Hackerman; 24.04.2013
comment
конечно, сделаю, когда буду внедрять на сайт. Теперь поиск работает глючно после обновления. Не в вашем примере... немного странно... - person Jeroen; 24.04.2013
comment
Я решил проблемы: даже после перестроения формат данных (массив массивов или массив объектов) должен быть одинаковым для таблицы (в противном случае поиск прерывается). Вам необходимо очистить другие события, которые вы связали, прежде чем воссоздавать таблицу (например, расширение строки). - person Jeroen; 25.04.2013