DataTables с разным количеством столбцов ⇐ Jquery
DataTables с разным количеством столбцов
Я загружаю данные с помощью ajax и динамически генерирую имена столбцов в своей таблице данных. Моя таблица данных имеет разное количество столбцов, в зависимости от выбора пользователя. (Есть раскрывающийся список).
Например, в раскрывающемся списке есть два варианта: Южная провинция и Северная провинция. Таблица Южная провинция содержит 4 столбца, а таблица Северная провинция — 6 столбцов.
Сценарий 1
Первый пользователь выбирает Южную провинцию, который имеет 4 столбца. Затем он генерирует таблицу без ошибок. Но после этого, если пользователь выберет Северную провинция, которая имеет 6 столбцов, таблица не будет сгенерирована, и консоль js выдаст ошибку печати, как показано ниже.
Uncaught TypeError: невозможно прочитать свойство style неопределенного jquery.dataTables.js:3828
Сценарий 2
Первый пользователь выбирает Северную провинцию, который имеет 6 столбцов. Затем он генерирует таблицу без ошибок. Но после этого, если пользователь выберет Южную провинцию, которая имеет 4 столбца, таблица не будет сгенерирована и появится ошибка печати консоли js, как показано ниже.
Uncaught TypeError: невозможно прочитать свойство mData неопределенного jquery.dataTables.js:6122
Но если обе таблицы имеют одинаковое количество столбцов, обе таблицы генерируются без ошибок.
Как я могу решить эту проблему?
Вот код JS
jQuery(документ) .готовый( функция() { $('#список-провинций').change( функция() { вар пров = $(this).val(); если (prov == "sp") { make_SP(); } else if (prov == "np") { make_NP(); } }); функция make_SP() { $("#dataTables-res_item") .Таблица данных( { «bDestroy»: правда, «bProcessing»: ложь, «bServerSide»: правда, "sAjaxSource": "/province_list_view?p_name=sp", "aoColumns" : [ { "mData": "result_date", "sTitle" : "Дата результата" }, { "mData": "result_day", "sTitle" : "День результатов" }, { "mData": "номер_рисования", "sTitle" : "Номер розыгрыша" }, { "mData": "draw_time", "sTitle": "Время рисования" } ], "порядок" : [ [ 0, "дескрипт" ] ] }); }; функция make_NP() { $("#dataTables-res_item") .Таблица данных( { «bDestroy»: правда, «bProcessing»: ложь, «bServerSide»: правда, "sAjaxSource": "/province_list_view?p_name=np", "aoColumns" : [ { "mData": "result_date", "sTitle" : "Дата результата" }, { "mData": "result_day", "sTitle" : "День результатов" }, { "mData": "номер_рисования", "sTitle" : "Номер розыгрыша" }, { "mData": "draw_time", "sTitle": "Время рисования" }, { "mData": "draw_place", "sTitle": "Нарисовать место" }, { "mData": "draw_person", "sTitle": "Агент" } ], "порядок" : [ [ 0, "дескрипт" ] ] }); }; });
Я загружаю данные с помощью ajax и динамически генерирую имена столбцов в своей таблице данных. Моя таблица данных имеет разное количество столбцов, в зависимости от выбора пользователя. (Есть раскрывающийся список).
Например, в раскрывающемся списке есть два варианта: Южная провинция и Северная провинция. Таблица Южная провинция содержит 4 столбца, а таблица Северная провинция — 6 столбцов.
Сценарий 1
Первый пользователь выбирает Южную провинцию, который имеет 4 столбца. Затем он генерирует таблицу без ошибок. Но после этого, если пользователь выберет Северную провинция, которая имеет 6 столбцов, таблица не будет сгенерирована, и консоль js выдаст ошибку печати, как показано ниже.
Uncaught TypeError: невозможно прочитать свойство style неопределенного jquery.dataTables.js:3828
Сценарий 2
Первый пользователь выбирает Северную провинцию, который имеет 6 столбцов. Затем он генерирует таблицу без ошибок. Но после этого, если пользователь выберет Южную провинцию, которая имеет 4 столбца, таблица не будет сгенерирована и появится ошибка печати консоли js, как показано ниже.
Uncaught TypeError: невозможно прочитать свойство mData неопределенного jquery.dataTables.js:6122
Но если обе таблицы имеют одинаковое количество столбцов, обе таблицы генерируются без ошибок.
Как я могу решить эту проблему?
Вот код JS
jQuery(документ) .готовый( функция() { $('#список-провинций').change( функция() { вар пров = $(this).val(); если (prov == "sp") { make_SP(); } else if (prov == "np") { make_NP(); } }); функция make_SP() { $("#dataTables-res_item") .Таблица данных( { «bDestroy»: правда, «bProcessing»: ложь, «bServerSide»: правда, "sAjaxSource": "/province_list_view?p_name=sp", "aoColumns" : [ { "mData": "result_date", "sTitle" : "Дата результата" }, { "mData": "result_day", "sTitle" : "День результатов" }, { "mData": "номер_рисования", "sTitle" : "Номер розыгрыша" }, { "mData": "draw_time", "sTitle": "Время рисования" } ], "порядок" : [ [ 0, "дескрипт" ] ] }); }; функция make_NP() { $("#dataTables-res_item") .Таблица данных( { «bDestroy»: правда, «bProcessing»: ложь, «bServerSide»: правда, "sAjaxSource": "/province_list_view?p_name=np", "aoColumns" : [ { "mData": "result_date", "sTitle" : "Дата результата" }, { "mData": "result_day", "sTitle" : "День результатов" }, { "mData": "номер_рисования", "sTitle" : "Номер розыгрыша" }, { "mData": "draw_time", "sTitle": "Время рисования" }, { "mData": "draw_place", "sTitle": "Нарисовать место" }, { "mData": "draw_person", "sTitle": "Агент" } ], "порядок" : [ [ 0, "дескрипт" ] ] }); }; });
-
- Похожие темы
- Ответы
- Просмотры
- Последнее сообщение