Table Bootstrap-это легкий плагин для стола, который использует Ajax для получения данных в формате JSON. Его лиц и заполнение данных очень удобно и поддерживает интернационализацию. В последнее время фон использовал этот плагин, чтобы сделать приложение таблицы для обобщения.
1. Как использовать
Вы можете получить плагины JS, листы в стиле и международные плагины через CDN, предоставленную Youpaiyun, или напрямую загружать их на официальном веб-сайте. Поместите следующий плагин JS и стили в заголовок HTML и используйте его.
// style <link href = "http://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-tabl src = "http://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-table.min.js"> </script> // интернационализация, таблица китайцев <script src = "http://cdn.bootcss.com/bootstrap-table/1.9.1/locale/bootstrap-table-zh-cn.min.js"> </script>
2. Заполнение данных
Есть два способа получить данные из таблицы Bootstrap. Одним из них является указание источника данных с помощью свойства Data-Url таблицы, но указать URL при инициализации таблицы с помощью JavaScript для получения данных, как показано в следующем примере.
<Таблица data-toggle = "table" data-url = "data.json"> <tead> ... </tead> </table> $ ('#table'). Bootstraptable ({url: 'data.json'});Второй метод передачи первого метода является более гибким при обработке сложных данных. Как правило, второй метод используется для заполнения данных таблицы.
var $ table = $ ('#table'); $ table.bootstraptable ({url: "duobaoactivitylist", dataType: "json", Pagination: true, // pagination singleSelect: false, data-locale: "ZH-US", // Поиск таблицы китайцев: True, // Показать посторонний разгар. Название ', Field:' name ', Align:' Center ', Valign:' Middle '}, {title:' Status ', Align:' Center ', Valign:' Middle ',}, {title:' number участников ', Field:' CanegationsCounts ', Align:' Center '}, {Title:' Tild of участников ', Fieldcounts', Align: '}, {title:' Tild of участников ', Fieldcounts', Align: 'aten, {title:' Tild of alemantaints ', Fieldcounts', ':' at atement: ':' title: 'title:' title: ': «Starttime», Align: 'Center',}, {title: «Operation ', Field:' Id ', выравнивание:' center ', formatter: function (value, row, index) {var e =' <a href ="#"mce_href ="#"onclick =" edit (/'' + row.id + '/') ">" mce_href = "#" onclick = "del (/''+row.id+'/')"> удалить </a> ';Поле поле должно соответствовать поле, возвращаемому сервером до отображения данных.
3. Переворот и поиск
При пейджинге таблица Bootstrap передает два поля подкачки к бэкэнд: предел и смещение. Первый представляет количество каждой страницы, по умолчанию до 10, а последняя представляет собой смещение данных во время пейджинга.
При поиске поле поиска передается в бэкэнд, указывая на конкретный содержимое поиска.
Данные, возвращаемые на стороне сервера, также должны включать два поля: страница (количество страниц) и общее количество (общее количество данных), а передняя часть должна быть на основе этих двух полей.
Окончательный эффект отображения показан на рисунке ниже:
Выше приведено сводная информация о заполнении данных и странице Pagination применения в Bootstrap, представленном вам редактором. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!