|    | 
СИ-БИ техника | КВ техника | УКВ техника | Радиоизмерения | Защита от TVI | Источники питания | Софт | Расчеты | Справочники
Главная arrow Программирование arrow Java arrow Как выполнить постраничный вывод таблицы  

Как выполнить постраничный вывод таблицы

Проблема

Мне приходится выводить на Web-страницы очень большие таблицы. Можно ли как-то выводить их не целиком, а по частям, причем, так, чтобы посетитель мог их "листать" без перезагрузки страницы?

Решение

С объявленным в листинге 8.1 объектом DynamicTable это делается очень просто. Давайте выясним, как именно.

Сначала нам нужно объявить переменную. В ней будет храниться номер самой верхней строки таблицы, которая в данный момент отображается на экране. Установим изначальное значение этой переменной в ноль, чтобы вывести первую "страницу" таблицы.

Следующий наш шаг — создание таблицы с помощью объекта DynamicTabie. В качестве параметров метода createTable ИЛИ createTableAdvanced ЭТОГО объекта, устанавливающих номера первой и последней выводимой строк, мы зададим значение объявленной ранее переменной и то же самое значение, но увеличенное на количество одновременно выводимых строк (размер "страницы" таблицы), или оставшееся количество строк таблицы (если оно меньше размера "страницы"). И выведем таблицу на экран.

Чтобы переместиться на следующую "страницу" таблицы, сделаем следующее. Сначала проверим, не последняя ли это "страница" таблицы. Для этого достаточно вычесть из общего размера таблицы номер верхней выводимой строки (значение объявленной ранее переменной) и единицу и сравнить полученную разность с размером "страницы". Если она меньше размера "страницы", значит, это последняя "страница" таблицы, и мы ничего не делаем. В противном случае увеличим значение объявленной ранее переменной на размер "страницы" или на количество оставшихся строк таблицы (если оно меньше размера "страницы") и выведем таблицу на экран.

Для перемещения на предыдущую "страницу" таблицы нужно сделать вот что. Проверяем, не равен ли номер верхней выводимой строки (значение объявленной ранее переменной) нулю, т. е. не первая ли это "страница". Если это так, мы ничего не делаем, иначе уменьшим значение объявленной ранее переменной на размер "страницы" или на количество оставшихся до начала таблицы строк (если оно меньше размера "страницы") и выведем таблицу на экран.

Переместиться на первую "страницу" таблицы проще всего. Присваиваем объявленной ранее переменной ноль и выводим таблицу на экран.

Переместиться на последнюю "страницу" таблицы несколько сложнее. Сначала мы получим номер последней строки таблицы, потом вычтем из него размер "страницы" в строках и занесем полученное значение в переменную, объявленную ранее. После этого останется только вывести таблицу.

Народ советует

Для "листания" таблицы мы можем использовать гиперссылки, кнопки или что-то более мудреное (например, полосу навигации).

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

Народ советует

Постраничный вывод — неплохое решение для очень больших таблиц, содержащих множество строк. Также можно разбить такие таблицы по какому-то признаку на сегменты разного размера и выводить их посегментно. Но это требует несколько более сложного программирования.

Пример 1

Давайте рассмотрим HTML-код страницы с таблицей, содержимое которой выводится "страницами" фиксированного размера в две строки.

<HTML> <HEAD>

<TITLE>Языки программирования</TITLE> <SCRIPT SRC="dynamictable.js"></SCRIPT>

<!-- Предполагается, что объявление объекта DynamicTable помещено в файл сценария dynamictable.js --> </HEAD> <BODY>

<!-- Наша таблица будет выведена здесь, в созданном с помощью тега

<DIV> контейнере -->

<DIV ID="tableHolder"></DIV>

<SCRIPT TYPE="text/javascript">

var JSPS_COMPILING = "Компилируемый";

var JSPS_INTERPRETING = "Интерпретируемый";

// Задаем размер "страницы"

var JSPS_PAGE_SIZE = 2;

// Задаем номер первой выводимой строки в начальной "странице"

var topRowNumber = 0;

var tableHead = new Array();

tableHead[0] = new Array("Категория", "Язык");

var tableBody = new Array();

tableBody[0] = new Array(JSPS_COMPILING, "C++");

tableBody[1] = new Array(JSPS_INTERPRETING, "JavaScript");

tableBody[2] = new Array(JSPS_COMPILING, "Pascal");

tableBody[3] = new Array(JSPS_COMPILING, "Java");

tableBody[4] = new Array(JSPS_INTERPRETIKG, "Perl");

tableBody[5] = new Array(JSPS_COMPILING, "Delphi");

tableBody[6] = new Array(JSPS_COMPILING, "Visual Basic");

// При создании экземпляра объекта DynamicTable не забываем

// указать, что таблица должна выводиться в контейнере

var tableObject = new DynamicTable(document.all["tableHolder"]);

// Выводим первую "страницу" таблицы

putTable(0);

// Эта функция выводит таблицу на экран. В качестве параметра она // принимает номер первой выводимой строки в текущей "странице" function putTable(pFirstRowNumber)

{

if (pFirstRowNumber < 0) pFirstRowNumber = 0; if (pFirstRowNumber > tableBody.length - 1)

pFirstRowNumber = tableBody.length - 1; topRowNumber = pFirstRowNumber;

var lastRowNumber = pFirstRowNumber + JSPS_PAGE_SIZE - 1; if (lastRowNumber > tableBody.length - 1)

lastRowNumber = tableBody.length - 1; tableObject.createTable(tableBody, tableHead, null, "Языки программирования", pFirstRowNumber, lastRowNumber); tableObject.showTable(); }

// Четыре функции, выполняющие "листание" таблицы function toFirst()

{ putTable(0);

}

function toPrevious() {

putTable(topRowNumber - JSPS_PAGE_SIZE); }

function toNext() {

putTable(topRowNumber + JSPS_PAGE_SIZE); }

function toLast() {

putTable(tableBody.length - JSPS_PAGE_SIZE); } </SCRIPT>

<!-- Набор гиперссылок для "листания" таблицы --> <Р><А HREF="#" ONCLICK="toFirst();">B начало</А>  <А HREF="#" ONCLICK="toPrevious();">На предыдущую</А>  <А HREF="#" ONCLICK="toNext();">На следуюшую</А>  <A HREF="#" ONCLICK="toLast() ;">B конец</А></Р> </BODY> </HTML>

Народ советует

Чтобы вывести таблицу (или любой другой элемент страницы, формируемый программно) строго в определенное место, проще всего вставить в это место контейнер HTML, создаваемый с помощью тега <div>, и выводить таблицу в нем. Автор книги так и поступил в приведенном выше примере.

Пример 2

Последуем доброму совету народа и разобьем представленную в предыдущем примере таблицу на сегменты. В качестве критерия разбиения возьмем значение первого столбца таблицы — категорию языков программирования.

<HTML> <HEAD>

<TITLE>Языки программирования</TITLE> <SCRIPT SRC="dynamictable. js"x/SCRIPT>

<!-- Предполагается, что объявление объекта DynamicTable помещено в файл сценария dynamictable.js --> </HEAD> <BODY>

<!-- Наша таблица будет выведена здесь, в созданном с помощью тега

<DIV> контейнере -->

<DIV ID="tableHolder"></DIV>

<SCRIPT TYPE="text/javascript">

var JSPS_COMPILING = "Компилируемый";

var JSPS_INTERPRETING = "Интерпретируемый";

var tableHead = new Array();

tableHead[0] = new Array("Категория", "Язык");

var tableBody = new Array() ;

tableBody[0] = new Array(JSPS_COMPILING, "C++");

tableBody[1] = new Array(JSPS_INTERPRETING, "JavaScript");

tableBody[2] = new Array(JSPS_COMPILING, "Pascal");

tableBody[3] = new Array(JSPS_COMPILING, "Java");

tableBody[4] = new Array(JSPS_INTERPRETING, "Perl");

tableBody[5] = new Array(JSPSJCOMPILING, "Delphi");

tableBody[6] = new Array(JSPS_COMPILING, "Visual Basic");

// Элементы этого массива будут содержать номера первых строк

// соответствующих сегментов таблицы

var segmentTopRowNumbers = new Array();

//А элементы этого массива будут содержать количества строк

// соответствующих сегментов таблицы

var segmentRowCounts = new Array();

// Выполняем разбивку таблицы на сегменты и заносим в объявленные

// выше массивы нужные величины .

var category = ""; var segmentNuinber = -1;

for (var i = 0; i < tableBody.length; i++) { var cat = tableBody[i][0]; if (category == cat)

segmentRowCounts[segmentNuinber]++ else { segmentNumber++;

segmentTopRowNumbers [segmentNuinber] = i; segmentRowCounts[segmentNuinber] = 1; category = cat; } } // При создании экземпляра объекта DynamicTable не забываем // указать, что таблица должна выводиться в контейнере var tableObject = new DynamicTable(document.all["tableHolder")); // Задаем номер первого выводимого сегмента var currentSegmentNumber = 0; // Выводим первую "страницу" таблицы putTable(0);

// Эта функция выводит сегмент таблицы на экран. В качестве // параметра она принимает номер выводимого сегмента function putTable(pSegmentNumber) {

if (pSegmentNumber < 0) pSegmentNumber = 0;

if (pSegmentNumber > segmentTopRowNumbers.length - 1) pSegmentNumber = segmentTopRowNumbers.length - 1;

currentSegmentNumber = pSegmentNumber;

tableObject.createTable(tableBody, tableHead, null, "Языки программирования", segmentTopRowNumbers[pSegmentNumber], segmentTopRowNumbers[pSegmentNumber] + segmentRowCounts[pSegmentNumber] - 1);

tableObj ect.showTable(); }

// Четыре функции "листания" таблицы function toFirst()

{ putTable(0);

}

function toPrevious() {

putTable(currentSegmentNumber - 1); }

function toNext() {

putTablefcurrentSegmentNuiriber + 1); }

function toLast () {

putTable(segmentTopRowNuiribers.length - 1) ; } </SCRIPT>

<!-- Набор гиперссылок для "листания" таблицы --> <Р><А HREF="#" ONCLICK="toFirst();">B начало</А>  <А HREF="#" ONCLICK="toPrevious();">На предыдущую</A>  <А HREF="#" ONCLICK="toNext();">Ha следующую</A>  <A HREF="#" ONCLICK="toLast() ;">B конец</А></Р> </BODY> </HTML>

Народ советует

Сегментация весьма полезна в справочниках, прайс-листах и т. п., в общем, во всех больших таблицах, содержимое которых разбивается на несколько категорий. Только неплохо было бы сначала сгруппировать строки таблиц по этим самым категориям, чем автор этой книги так и не озаботился.

RLBN.ru - Электроника и компьютеры
0.1425
Hosted by uCoz