AMP версия сайта

Электронная библиотека

  • Современные работы
  • Бесплатно скачать книги
  • Бесплатно скачать книги
  • Высшая алгебра, геометрия
  • Математический анализ, ТФ
  • Дифференциальные уравнения
  • Численные методы алгоритмы
  • Математическая физика
  • Теория чисел и множеств
  • Специальные темы, книги
  • Общая высшая физика
  • Другие популярные издания
  • Программисту веб-дизайнеру

  • Документация - HTML, XML
  • Статьи пресс-релизы обзоры
  • Веб-дизайнеру - JavaScript
  • Другие материалы

  • Авторское право - помощь
  • Полиграфия, печать цвет
  • Библиография, статьи
  • Библиотека: скачать готовые скрипты Javascript
    Сортировка таблицы клиентом прямо на веб-странице при помощи Javascript

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

    Скачайте архивный файл ZIP или архив EXE (rar-распаковывающийся), распакуйте его и поместите содержимое распакованной папки в ту-же самую папку, где размещается Ваша веб-страница. Изменение кода скрипта может повлечь его неработоспособность.

    Выделите мышью приводимый ниже код, скопируйте его (командой Ctrl+C) и вставьте его (командой Ctrl+V) в html-код своей веб-страницы в нужное Вам место перед таблицей.

    <script language="javascript" src="tablesort.js">
    </script>

    Вам нужны две картинки (изображения), которые бы указывали на тип проведенной сортировки конкретного столбца - файл "0.gif" (картинка сортировки вниз) и файл "1.gif" (картинка сортировки вверх). Образцы картинок в папке "img" прилагаются в архиве и могут быть заменены Вами на любые другие с сохранением имени файла и папки.

    В список классов стилей обязательно добавьте описания, параметры которых (цвет, шрифт и отступы) можно редактировать (их названия и имена редактировать категорически запрещено):

    /* наша html таблица */
    table.sort {
    border-spacing:0.1em;
    margin-bottom:1em;
    margin-top:1em
    }

    /* ячейки таблицы */
    table.sort td {
    border:1px solid #CCCCCC;
    padding:0.3em 1em
    }

    /* заголовки таблицы */
    table.sort thead td {
    cursor:pointer;
    cursor:hand;
    font-weight:bold;
    text-align:center;
    vertical-align:middle
    }

    /* заголовок отсортированного столбца */
    table.sort thead td.curcol {
    background-color:#999999;
    color:#FFFFFF
    }

    Так должна выглядеть сортируемая таблица. Здесь налагаются очень жесткие требования по правильности ее оформления. Все дополнительные команды, открывающие и закрывающие тэги должны присутствовать. Необходимо указать теги Thead (шапка таблицы) и Tbody (основная часть таблицы). Обычно их мало кто использует, но здесь эти теги обязательны. Шапка таблицы также обязательна в указанной форме. Можно добавлять элементы оформления, но ставить все закрывающие тэги в правильной последовательности. Обратите ОСОБОЕ внимание на код сортируемой таблицы, который можно редактировать в деталях. Внимание: регистр букв имеет значение и стили заголовков можно редактировать только через список стилей, иначе программа заглючит !!!

    <table class="sort" align="center">
    <thead>
    <tr>
    <td>Имя поля 1</td>
    <td>Имя поля 2</td>
    <td>Имя поля 3</td>
    <td>Имя поля 4</td>
    </tr>
    </thead>

    <tbody>
    <tr>
    <td>Первая запись и код строки 1</td>
    <td>Вторая запись и код строки 1</td>
    <td><a href="URL ссылка 1">Четвертая запись и код строки 1</a></td>
    <td>Четвертая запись и код строки 1</td>
    </tr>
    .......
    <tr>
    <td>Первая запись и код строки N</td>
    <td>Вторая запись и код строки N</td>
    <td><a href="URL ссылка N">Четвертая запись и код строки N</a></td>
    <td>Четвертая запись и код строки N</td>
    </tr>
    </tbody>
    </table>

    c 15/06/2015 страница посещена

    AMP версия сайта
    Мобильная версия

    Сайт для компьютера
    http://www.mat.net.ua