Вёрстка пагинации на гридах

#css #вёрстка #pagination #css_grid #пагинация

Здравствуйте, подскажите каким образом можно дополнить стили, чтобы пагинация не
ломалась при уменьшении ширины экрана? 

Сейчас выходит следующее:


а хотелось бы добиться такого результата:


Второй пример я получил при добавлении min-width: min-content; к классу .pagination__item

но на более широком экране последний элемент не хочет переходить на новую строку
и получается так:




.pagination {
  font-family: Tahoma;
  display: grid;
  grid-gap: 5px;
  grid-auto-flow: column;
  justify-content: start;
  grid-template-columns: repeat(auto-fit, minmax(32px, 1fr));
}

.pagination__list {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(32px, min-content));
}

.pagination__item {
  display: grid;
  align-content: center;
  justify-content: center;
  user-select: none;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
  padding: 5px;
  border-radius: 3px;
  background-color: #ffffff;
  color: #444444;
  border-width: 1px;
  border-style: solid;
  border-left-color: #dbdbdb;
  border-top-color: #dbdbdb;
  border-right-color: #c4c4c4;
  border-bottom-color: #c4c4c4;
}

  

    
1
    
2
    
3
    
4
    
5
    
6
    
7
    
8
    
9
    
10
    
11
    
12345678
  




    

Ответы

Ответ 1

Вам надо использовать Flex box. Grid для такой цели не подходит, так как предполагает
равный размер ячеек в колонке.



.pagination {
  display: flex;
  flex-wrap: wrap;
}

.pagination div {
  user-select: none;
  cursor: pointer;
  box-sizing: border-box;
  padding: 5px;
  border-radius: 3px;
  background-color: #ffffff;
  color: #444444;
  border-width: 1px;
  border-style: solid;
  border-left-color: #dbdbdb;
  border-top-color: #dbdbdb;
  border-right-color: #c4c4c4;
  border-bottom-color: #c4c4c4;
  margin: 3px;
}

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
111111
  
222222222
  
333333333333
  
44444444444444

MySQL - определение позиции в запросе или как использовать механизм поиска по индексам btree

#php #mysql #pagination

Есть запрос, выводимый на постраничном гриде, управляемый limit. При добавлении новой
строки в таблицу, участвующей в запросе нужно отобразить список в данной таблице, начиная
с новой записи. Запись я могу идентифицировать по уникальному идентификатору. Мне нужно
найти значения start, end (limit start, end) где в диапазоне end-start будет находится
искомая строка.
    

Ответы

Ответ 1

@KiTE дал вам правильный ответ, как это сделать средствами SQL.
Но, вообще говоря, доступ к индексам MySQL на низком уровне есть, и давно уже. Правда,
мало когда нужно им пользоваться.
Подробности читать на MySQL Handler Syntax.
А вот пример. Я создал такую таблицу:
mysql> SELECT * FROM test;
+---+---------+
| a | b       |
+---+---------+
| 1 | alpha   |
| 2 | bravo   |
| 3 | charlie |
| 4 | delta   |
| 5 | echo    |
| 6 | foxtrot |
+---+---------+

По полю b создал индекс, тоже с именем b;
Теперь открываем хандлер:
mysql> HANDLER test OPEN;

И читаем напрямую. Внимание, здесь и далее b — это имя индекса, а не поля (блин,
надо было по-другому обозвать).
Ищем нужную запись:
mysql> HANDLER test READ b = ('delta');
+---+-------+
| a | b     |
+---+-------+
| 4 | delta |
+---+-------+

Читаем две записи перед ней, в порядке индекса:
mysql> HANDLER test READ b PREV LIMIT 2;
+---+---------+
| a | b       |
+---+---------+
| 3 | charlie |
| 2 | bravo   |
+---+---------+

Курсор (позиция чтения), кстати, сместился. Мы теперь не на 'delta', а на 'bravo'.
Читаем следующие четыре записи:  

mysql> HANDLER test READ b NEXT LIMIT 4;
+---+---------+
| a | b       |
+---+---------+
| 3 | charlie |
| 4 | delta   |
| 5 | echo    |
| 6 | foxtrot |
+---+---------+

Поигрались, и хватит:
mysql> HANDLER test CLOSE;

Вот такой механизм. Можно использовать сравнения, можно WHERE. Работает заметно быстрее,
чем SELECT.


Ответ 2

Если ключ автоинкрементальный, то позицию новой строки в таблице можно узнать запросом:
SELECT COUNT(*) FROM table_name WHERE id < $id_value

Он посчитает кол-во предыдущих записей. Это значение можно принять за позицию строки
в таблице (начиная с 0).
Зная кол-во записей на страницу грида, и позицию записи в таблице базы, можно рассчитать
начальную позицию страницы на которой должна находиться искомая запись.
$top_position = floor($row_posotion / $page_row_count)

Дальше можно генерить запрос:
SELECT * FROM table_name LIMIT $top_position, $page_row_count

UPD:
Если используется сортировка по столбцам, то, в начале, нужно узнать значения этих
столбцов для искомой записи, затем, посчитать кол-во предыдущих записей. И дальше выводить
страницу.
Например, если сортировать по принципу ORDER BY filed1, field2, field3 DESC, то:
-- Получаем значение сортируемых столбцов для искомой записи
SELECT filed1, field2, field3
FROM table_name
WHERE id = $id_value
INTO @filed1, @field2, @field3;
-- Получаем кол-во предыдущих записей в отсортированном списке до искомой записи
SELECT COUNT(*) - 1 /* -1 потому что искомая запись тоже попадает в COUNT(*) */
FROM table_name
WHERE
    (filed1 <= @filed1) AND
    (filed2 <= @filed2) AND
    (filed3 >= @filed3)

И, дальше, зная позицию:
SELECT *
FROM table_name
ORDER BY  filed1, field2, field3 DESC
LIMIT $top_position, $page_row_count

Как получить $top_position, зная $row_posotion (COUNT(*) - 1), смотри выше.


Ответ 3

Пронумеровать строки в запросе можно следующими двумя запросами:
SET @n:=0;
SELECT @n:=@n+1 AS num, field1, field2, fieldN FROM table;

ЧПУ постраничной навигации в Yii2

Есть у меня на главной странице в контроллере sitecontroller экшен
public function actionIndex() { $searchModel = new CourseSearch(); $dataProvider = $searchModel->search(Yii::$app->request->queryParams);
return $this->render('index', [ 'searchModel' => $searchModel, 'dataProvider' => $dataProvider, ]); }
CourseSearch
public function search($params) { $query = Course::find()->active()->with(['category'])->orderBy(['id' => SORT_DESC]);
// add conditions that should always apply here
$dataProvider = new ActiveDataProvider([ 'query' => $query, 'pagination' => [ 'pageSize' => 2, ],
]); .............
Который выводит список постов через вьюху
$dataProvider, 'layout' => "{items}
{pager}", 'itemView' => '_item', 'emptyText' => 'Ничего не найдено.', 'emptyTextOptions' => [ 'tag' => 'div class="alert alert-danger"' ], 'pager' => [ 'firstPageLabel' => '««', 'lastPageLabel' => '»»', 'nextPageLabel' => false, 'prevPageLabel' => false, 'maxButtonCount' => 5, ], ]); ?>
И постраничная навигация когда переходишь например на вторую страницу выдает вот такой вид:
mysite.ru/?page=2&per-page=2
Вот как сделать чтобы страницы выводились mysite.ru/page-2
'urlManager' => [ 'class' => 'yii\web\UrlManager', // Disable index.php 'showScriptName' => false, // Disable r= routes 'enablePrettyUrl' => true, 'rules' => [ 'page--' => 'site/index', '' => 'site/index', '' => 'site/', '' => 'site/category', '/' => 'site/view',

Ответ

Открываем config/web.php и добавляем в components:
'components' => [ 'urlManager' => [ 'class' => 'yii\web\UrlManager', // Disable index.php 'showScriptName' => false, // Disable r= routes 'enablePrettyUrl' => true, 'rules' => [ '//page-' => '/', '/' => '/', ], //Далее какой-то код. ],
Код рабочий, если возникнут какие-то проблемы, выложите config/web.php и мы поможем.

Вёрстка пагинации на гридах

Здравствуйте, подскажите каким образом можно дополнить стили, чтобы пагинация не ломалась при уменьшении ширины экрана?
Сейчас выходит следующее:
а хотелось бы добиться такого результата:
Второй пример я получил при добавлении min-width: min-content; к классу .pagination__item
но на более широком экране последний элемент не хочет переходить на новую строку и получается так:
.pagination { font-family: Tahoma; display: grid; grid-gap: 5px; grid-auto-flow: column; justify-content: start; grid-template-columns: repeat(auto-fit, minmax(32px, 1fr)); } .pagination__list { display: grid; grid-gap: 5px; grid-template-columns: repeat(auto-fit, minmax(32px, min-content)); } .pagination__item { display: grid; align-content: center; justify-content: center; user-select: none; text-align: center; cursor: pointer; box-sizing: border-box; padding: 5px; border-radius: 3px; background-color: #ffffff; color: #444444; border-width: 1px; border-style: solid; border-left-color: #dbdbdb; border-top-color: #dbdbdb; border-right-color: #c4c4c4; border-bottom-color: #c4c4c4; }

1

2

3

4

5

6

7

8

9

10

11

12345678

Ответ

Вам надо использовать Flex box. Grid для такой цели не подходит, так как предполагает равный размер ячеек в колонке.
.pagination { display: flex; flex-wrap: wrap; } .pagination div { user-select: none; cursor: pointer; box-sizing: border-box; padding: 5px; border-radius: 3px; background-color: #ffffff; color: #444444; border-width: 1px; border-style: solid; border-left-color: #dbdbdb; border-top-color: #dbdbdb; border-right-color: #c4c4c4; border-bottom-color: #c4c4c4; margin: 3px; }

1

2

3

4

5

6

7

8

9

10

111111

222222222

333333333333

44444444444444

MySQL - определение позиции в запросе или как использовать механизм поиска по индексам btree

Есть запрос, выводимый на постраничном гриде, управляемый limit. При добавлении новой строки в таблицу, участвующей в запросе нужно отобразить список в данной таблице, начиная с новой записи. Запись я могу идентифицировать по уникальному идентификатору. Мне нужно найти значения start, end (limit start, end) где в диапазоне end-start будет находится искомая строка.

Ответ

@KiTE дал вам правильный ответ, как это сделать средствами SQL. Но, вообще говоря, доступ к индексам MySQL на низком уровне есть, и давно уже. Правда, мало когда нужно им пользоваться. Подробности читать на MySQL Handler Syntax А вот пример. Я создал такую таблицу: mysql> SELECT * FROM test; +---+---------+ | a | b | +---+---------+ | 1 | alpha | | 2 | bravo | | 3 | charlie | | 4 | delta | | 5 | echo | | 6 | foxtrot | +---+---------+ По полю b создал индекс, тоже с именем b Теперь открываем хандлер: mysql> HANDLER test OPEN; И читаем напрямую. Внимание, здесь и далее b — это имя индекса, а не поля (блин, надо было по-другому обозвать). Ищем нужную запись: mysql> HANDLER test READ b = ('delta'); +---+-------+ | a | b | +---+-------+ | 4 | delta | +---+-------+ Читаем две записи перед ней, в порядке индекса: mysql> HANDLER test READ b PREV LIMIT 2; +---+---------+ | a | b | +---+---------+ | 3 | charlie | | 2 | bravo | +---+---------+ Курсор (позиция чтения), кстати, сместился. Мы теперь не на 'delta', а на 'bravo'. Читаем следующие четыре записи: mysql> HANDLER test READ b NEXT LIMIT 4; +---+---------+ | a | b | +---+---------+ | 3 | charlie | | 4 | delta | | 5 | echo | | 6 | foxtrot | +---+---------+ Поигрались, и хватит: mysql> HANDLER test CLOSE; Вот такой механизм. Можно использовать сравнения, можно WHERE. Работает заметно быстрее, чем SELECT.