Табличные данные

Таблицы в текстовых файлах CSV

Здесь рассматриваются:

Данные с табличной структурой, как известно, можно хранить в обычных текстовых файлах. При этом для разделения строк и данных внутри одной строки (полей) используются символы-разделители. Файлы с такого рода структурой еще называют CSV-файлами (Comma Separated Values — значения, разделенные запятой). В качестве разделителей полей часто используют запятую, а для разделения строк — управляющий символ перехода на новую строку. Однако можно использовать и другие символы, отличающиеся от тех, из которых состоят данные. На рисунке показан пример CSV-файла, в котором в качестве разделителя полей используется вертикальная черта "|", а разделителя строк — непечатаемый управляющий символ перехода на новую строку.

Обычно обработку CSV-файлов выполняют на сервере. Вместе с тем, это же можно сделать и на стороне клиента. В Internet Explorer имеется фирменное расширение от Microsoft (ActiveX) Tabular Data Control, позволяющее загрузить CSV-файл и с помощью его методов выполнить различные операции над полученными табличными данными, такие как сортировка, поиск, фильтрация и др. Иначе говоря, в Internet Explorer имеется встроенное средство для работы с CSV-файлами на стороне клиента, которое не используют другие браузеры. Здесь рассматриваются клиентские средства работы с CSV-файлами, которые годятся для всех браузеров, поддерживающих JavaScript. А именно, применение объекта XMLHttpRequest и несколько функций обработки табличных данных.

Пример

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

В примере содержимое загруженного в объект XMLHttpRequest текстового файла преобразуется в двумерный массив с помощью специально для этого написанной функции CSVtoA(). Далее двумерный массив сортируется по значениям второго столбца с помощью функции asort(). Кроме указанных функций, я написал еще и afilter() для фильтрации (поиска) строк (см. далее).

Пример ленты новостей

На главной странице данного сайта имеется своего рода лента новостей - элемент, содержимое которого периодически изменяется. Это - еще один пример применения описываемой здесь технологии. Содержимое (обычный текст или, если угодно, HTML-код) находится в текстовом файле со структурой CSV. Оно периодически читается и преобразуется в массив с помощью уже упоминавшейся функции CSVtoA(). Затем из массива случайным образом извлекается некоторый элемент и вставляется в HTML-элемент (например, <div>) путем замены его содержимого (свойство innerHTML).

Далее приводятся коды упоминавшихся выше функций.

Загрузка CSV-файла с табличными данными

Загрузить в браузер CSV-файл без перезагрузки станицы можно с помощью объекта XMLHttpRequest. Полученный CSV-файл можно как-то обработать и, при желании, отобразить данные на странице. Ниже представлен JavaScript-код, запрашивающий текстовый файл. 
 var req=false;
 if(window.XMLHttpRequest) { // поддерживается ли XMLHttpRequest ?
      req=new XMLHttpRequest(); // для для IE7+ и др.
 } else {
      try {
          req=new ActiveXObject('Msxml2.XMLHTTP'); // для IE версий, меньших 7
      } catch (e) {
          req=new ActiveXObject('Microsoft.XMLHTTP'); // для старых IE
      }
 }
 if (!req) {// если объект XMLHttpRequest поддерживается
   alert("Объект XMLHttpRequest не поддерживается данным браузером");
 } else {   // если поддерживается
    /* назначаем обработчик событию готовности объекта: */
     req.onreadystatechange = receive;  
    /* открываем объект для взаимодействия:
       передача методом get;
       запрашиваемый файл — mytext.txt;
       режим — асинхронный
    */
     req.open("get", 'mytext.txt?'+Math.random(),true); // открываем соединение
     req.send(null); // посылаем запрос серверу
 }
function receive() { // получение данных от сервера 
  if (req.readyState == 4){// если запрос завершен
     if (req.status == 200) { // если запрос завершен без ошибок
        /* Ответ сервера (содержимое файла mytext.txt)
           содержится в свойстве req.responseText.
           Здесь может находиться код обработки значения req.responseText.
        */
     } else {alert("Ошибка "+ req.status+":\n" + req.statustext)}
  }
}