Последний проект ASP.NETMVC требует классификации списков данных. Первоначально это бэкэнд, разработанный на основе Bootstrap, поэтому мне интересно, есть ли Bootstrap плагин для подкидки или функцию подкрепления, поддерживаемую JQuery, так что общий стиль бэкэнда веб-сайта может быть унифицирован без необходимости писать набор функций пейджинга самостоятельно.
Первое, что загружает PageRap Paginator. Адрес загрузки: плагин для пагинатора Bootstrap Paginator
Прежде всего, файлы JS и CSS должны быть введены над представлением. Есть три основных файла, а именно файлы JS CSS, JQUERY и Paginator. Я искал онлайн, и кажется, что jQuery должен быть версией 1.8 или выше, я никогда не проверял это лично. Итак, ссылка на файл представления:
<link href = "css/bootstrap.css" rel = "styleSheet"> <script type = "text/javascript" src = "js/jquery-1.8.1.js"> </script> <script type = "text/javascript" src = "js/boottrap-paginator.js"> </javascript "src =" js/boottrap-paginator.js "
Затем функция страниц, конечно, является местным обновлением, основанным на Ajax, чтобы привлечь нас, и, конечно, это требует поддержки JQUERY. Раньше я выполнял легкую пейджинг, и на этот раз это должно быть немного другое.
<Script> $ (function () {var carid = 1; $ .ajax ({url: «/oa/setrate/getDate», datatype: 'json', type: «post», data: «id =» + carid, успех: функция (данные) {if data! = null) {$. json $ ("#list"). Приложение ('<table id = "data_table">'); $ ("#list"). $ ("#list"). $ ("#List"). ); "> Delete </button> '); $ ("#list "). Append (' </td> '); $ ("#list "). Append (' </tr> '); $ ("#list "). Append (' </tbody> '); $ ("#list "). Append (' <Tr> '); $ (#list »). Тип) var currentPage = eval ("(" + data + ")"). CurrentPage; «Предыдущая страница»; "page =" + page, success: function (data1) {if (data1! = null) {$. $ ("#list"). Append ('<Th> ID </th>'); $ (#Список »). $ ("#List"). Append ('<Td>' + item.name + '</td>'); $ ("#List"). Append ('<Button Onclick = "edit (' + item.id + ');"> изменить </button>'); $ ("#list"). Append ('</tr>'); $ (#list »)В основной части представления есть два DIV, один для представления списка данных, а другой для размещения навигации на странице выбора.
<div> <babel> Список отделов </label> <hr/> <div id = "list"> </div> <div id = "Пример"> </div> </div>
Метод GetDate в фоновом режиме таков:
public actionResult getDate (int id, int? Page) {int pageIndex = page ?? 1; // Текущая страница const int pagesize = 2; // Это используется для установки количества данных, которые будут отображаться на каждой странице. Рекомендуется написать это в web.config для глобального контроля // Получить данные отдела, чтобы отображаться ienumerable <model.qgoa_department> list = operatecontext.current.bllsession.iqgoa_departmentbll.getpagedlist (pageindex, pageSize, x => x.id! // Получить количество данных int rowcount = list.count (); // Посредством расчета необходимо разделить страницу на несколько страниц. Данные, которые меньше одной страницы рассчитываются в соответствии с одной страницей if (rowcount%pagesize! = 0) {rowcount = rowcount / pagesize + 1; } else {rowcount = rowcount / pagesize; } // конвертировать в json format var strresult = "{/" pagecount/":"+rowcount+",/" currentPage/":"+pageIndex+",/" list/":"+jsonConvert.serializeObject (list)+"}"; возврат JSON (StrResult, JsonRequestbehavior.allowget); }Этот метод по -прежнему немного ошибочен и может быть написан более идеально, так же, как приведенный выше страницы можно изменить во всем мире, прочитав файл конфигурации web.config, который удобен для управления. Кроме того, для получения информации, такой как атрибуты страницы: номер страницы, текущая страница, количество данных и т. Д., Вы можете сделать класс для хранения информации. Если проект веб -сайта больше, нам будет удобнее изменить наш собственный код.
Окончательный эффект отображения заключается в следующем:
Если вы все еще хотите учиться глубже, вы можете нажать здесь, чтобы изучить и прикрепить к вам 3 захватывающих тем:
Начальная учебник по обучению
Bootstrap Practical Rutorial
Учебное пособие по использованию плагина Bootstrap
Выше приведено использование плагина Paginator Paginator Paginator, который я поделился с вами. Я надеюсь, что вам будет полезно овладеть использованием подключаемого модуля Paginator Paginator.