Множественные значения полей из строки в том же столбце JQUERY, что и с использованием Ajax

Question

Я только испытал с использованием метода datasource таблицы HTML для JQuery Datatable. Так что делаю это просто

$("#mytable").datatable(); 

Но теперь у меня есть таблица с более чем 10000 строк. Поэтому, применяя плагин к этой таблице, сначала сначала отображается таблица со 10000 строками, а после того, как применяется плагин с разбивкой по страницам, и сначала отображает только 10 строк. Но перед этим отображаются все строки, которые делают страницу очень высокой, и требуется некоторое время в мобильных браузерах для применения плагина. Таким образом, до тех пор, пока он не завершится, пользователи смогут просматривать все строки. Это вызывает некоторые проблемы. Поэтому я подумал о способе AJAX для источника данных, и я выбрал объект JSON со стороны сервера. Но моя таблица должна быть похожа на то, что в каждой ячейке будет форматирование HTML, или каждая ячейка должна включать в себя несколько значений из той же строки в другом макете.

Как вы можете видеть, первый столбец, имеющим флажок .. Вторую ячейку столбца, имеющую структуру HTML, в котором имя на первую линию и ID во второй строке, а также дата находится на правом же окно выровненных по float: справа до этого диапазона, который имеет несколько пролетов и некоторые другие теги. То же самое и в третьем столбце. Итак, как я могу достичь этого, чтобы показать несколько значений в одном столбце и следовать следующему макету HTML, который у меня есть сейчас.

Answer 1

Я думаю, что с помощью Ajax, чтобы загрузить таблицу будет лучшим вариантом, вы можете контролировать возвращаемый результат, как вы поставите структуру возвращаемой JSON, вы можете также сделать столбец флажка, используя этот фрагмент кода:

"sName": "FieldName", "mRender": function (data, type, full) { 
        if (data === "True") { 
         return '<input type=\"checkbox\" checked value="' + data + '">'; 
        } else { 
         return '<input type=\"checkbox\" value="' + data + '">'; 
        } 
       } 

где данные возвращаемое значение из вашего JSON

Answer 2

Если переход на AJAX является слишком резким, и главной заботой является начальной высотой DOM <table>, вы всегда можете скрыть таблицу и показать DataTable, когда он инстанцирован. При этом <table> будет занимать место только тогда, когда оно станет dataTable.

#example { 
    display: none; 
} 

$("#example").dataTable().show(); 

демо ->http://jsfiddle.net/tyevzmjz/