Во -первых, посмотрите на визуализацию реализации. Если вы думаете, что это неплохо, пожалуйста, обратитесь к коду реализации.
Вышеуказанные данные на страницах ниже
Как использовать
1 CSS импорта Bootstrap
<link rel = "styleSheet" href = "css/v3/bootstrap.min.css">
2 Импорт jQuery
<script src = "js/jquery-1.10.1.min.js" type = "text/javascript"> </script>
3 Плагин Paging Table Ltable.
<script src = "js/ltable.js" type = "text/javascript"> </script>
4 Добавьте тег HTML и назначьте значения идентификатору
<!-Таблица-> <div id = "d"> </div> <!-Pagination-> <div id = "u"> </div>
5 Получите данные
Здесь получите моделируемые данные файла JSON через AJAX
initable (data) - это метод инициализации таблиц и пейджинг
$ .ajax ({url: "json/data.json", тип: "get", datatype: "json", успех: function (data) {inittable (data);}, ошибка: function (e) {alert ("ошибка сбора данных");}});6 Инициализировать таблицу
Инициализировать таблицу сначала в методе инициализации
var obj = data; var mytable = $. Имя: [«userId», «Имя пользователя», «Пароль», «Имя разрешения», «Статус», «_ OPT»], TID: «UserId», флажок: «userId»});
Описание кода
6.1 Метод инициализации
$ .ltable ('id', {data, title, name, tid, chechbox});
6.2 Описание атрибута
Идентификатор: блок заполнения, выбранная страницей
Данные: данные JSON отображаются на странице
Название: Поле, соответствующее данным для каждого столбца таблицы
Имя: Первая строка таблицы отображает поле
TID: соответствующее значение ключа каждой строки (может быть опущено)
Флажок: значение, соответствующее флажеству (может быть опущено)
6.3 Описание флажества
Активируйте при добавлении атрибута Chechbox init
Флажок name = "IDS"
Получить выбранный метод столбца: $ .ltable.getCheckboxids () Пример возвращаемого значения "1,2,3,4"
6.4 Инструкции по эксплуатации
Когда атрибут name = _opt, заголовок таблицы автоматически меняет позицию «Операция»
Соответствующий заголовок атрибута может добавить кнопки и другие операции
Пример: "<button OnClick = 'uddf (id)'> modify </button>"
Метод щелчка uddf (). Идентификатор параметра является соответствующим полем атрибута TID.
7 Инициализируйте страницу
Тогда часть страниц
$ .lpaging ('#u', // Соответствующий идентификатор {pageNumber: obj.pageNumber // текущий номер страницы, TotalPage: obj.totalpage // Общий номер страницы, отсчет: 5 // номер отображаемого входного ящика (NumberSize). DataRl);Описание кода
7.1 Метод инициализации
$ .lpaging ('id', {pageNumber, totalPage, Countsize, Count, OnPageChange (num), inputSearch});
7.2 Описание метода атрибута
Идентификатор: блок заполнения, выбранная страницей
PageNumber: текущий номер страницы
Общая страница: общее количество страниц
Считается: количество отображений страницы (по умолчанию 5 можно пропустить)
Подсчет: общее количество данных
OnPageChange (num): возвращает событие Click
inputsearch: отображать является ли флажок ввода запроса ложно
getInputVal (): возвращает номер в поле ввода
8 Весь код
<! Doctype html> <html> <head> <meta charset = "utf-"> <meta http-equiv = "x-ua-совместимый" content = "ie = edge"> <tite> </title> <link rel = "stylesshipe" href = "css/v/boutptrap.min.css"> </hebss> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </huef hale. id = "d"> </div> <!-Pagination-> <div id = "u"> </div> </body> <script src = "js/jquery -... min.js" type = "text/javascript"> </script> <script src = "js/ltable.js" type = "javascript"> </javize> </javiscript "> </javiscript"> </javize> </javiscript> </javize> </javiscript " mytable; var datairl = ""; // инициализировать страницу init -page (, pagesize, ""); // ajax получает функцию данных initPage (num, ps, url) {$. ajax ({url: «json/data.json», тип: «get», // type: «post», // data: "userInfovo.pageId ="+num+"& userInfovo.pagecount ="+datAtype: "json", Успех: function (data) {inittable (data);}, ошибка: function (e) {console.log (e) alert ("ошибка сбора данных");}});} // инициализировать таблицу и функцию лиц страниц. obj = data; // tablemytable = $. Имя: ["userId", "userName", "пароль", "Имя разрешения", "Статус", "_ OPT"], TID: "userId", флажок: "userId"}); // mytable.getCheckboxids (); // Получите значение, выбранное CHACEBOX // PAGE $ .lpaging ('#u', // идентификатор компонента {pageNumber: obj.pageNumber // Текущий номер страницы, общая страница: obj.totalpage // Общее число страниц, countsize: // Показ страницы (может быть пропущен), count: obj.count, inputsearch: true // show the Quyer wintpege). {initPage (num, pageSize, dataUrl);}});} // изменение метода функции updf (id) {alert ("modify:"+id);} // Удалить метод функции Delf (id) {alert ("delete:"+id);} </script> </html>Wulin.com рекомендует темы, связанные с начальной загрузкой:
Навыки работы компонента начальной загрузки
Сводка знаний, связанных с начальной загрузкой
Выше приведено подробное объяснение подключаемого модуля Bootstrap3 и подключаемых примеров, представленных редактором. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!