Аналог PHP скрипта на Javascript

@ИванЕжов · Регистрация: 03.04.2019

Студворк — интернет-сервис помощи студентам

Здравствуйте!
Использую DataTable. Ранее, данные брал из Excel'я, при помощи PHPExcel. Использовал это:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<?php
require_once 'phpexcel/Classes/PHPExcel.php';
$excel = PHPExcel_IOFactory::load('price.xlsx');
 
Foreach($excel ->getWorksheetIterator() as $worksheet) {
    $lists[] = $worksheet->toArray();
}
 
//$price = array();
foreach($lists as $list){
    // echo '<table class="search-table display" border="1">';
    // Перебор строк
    foreach($list as $row)
    {
        //$rows = array();
       echo '<tr class="product__element">
<td>' . $row['1'] . '</td>
<td>' . $row['2'] . '</td>
<td><a data-fancybox="images" data-caption="' . $row['3'] . '" href="i/' . $row['7'] . '.webp"><img src="i/' . $row['7'] . '.jpg" alt="' . $row['3'] . ' " title="' . $row['3'] . '" ></a></td>
<td class="product__name">' . $row['3'] . '</td>
<td>' . $row['4'] . '</td>
<td>' . $row['5'] . '</td>
<td class="product__price">' . $row['6'] . '</td>
<td><div class="product__quantity"></div></td>
<td><button class="product__add-to-cart-button"  data-sb-id-or-vendor-code="' . $row['0'] . '" data-sb-product-name="' . $row['3'] . '" data-sb-product-price="' . $row['6'] . '" data-sb-product-quantity="1" data-sb-product-img="i/' . $row['7'] . '.webp"><i class="fas fa-cart-plus"></i></button></td>
</tr>';
    }
    // echo '</table>';
}
// print_r($list);
 echo json_encode($lists); //Выводим прочитанные данные в JSON
?>

Подскажите, пожалуйста - как реализовать это на Javascript?

Подключение к БД и настройки:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
$(document).ready(function() {
    $('#example').DataTable( {
        "ajax": 'arrays.txt', // как, предварительно, указать класс строке? <tr class="product__element">
    "columns": [
        { "data": 0 }, // это выводить не надо - артикул, он будет показан в корзине
        { "data": 1 }, // как вместо этого сделать <td>' . $row['1'] . '</td>
        { "data": 2 }, // <td>' . $row['1'] . '</td>
        { "data": 3 }, // <td><a data-fancybox="images" data-caption="' . $row['3'] . '" href="i/' . $row['7'] . '.webp"><img src="i/' . $row['7'] . '.jpg" alt="' . $row['3'] . ' " title="' . $row['3'] . '" ></a></td>
        { "data": 4 },  // <td>' . $row['4'] . '</td>
        { "data": 5 }, // <td>' . $row['5'] . '</td>
        { "data": 6 }, //  поле для ввода количества("-"числовое поле"+") <td><div class="product__quantity"></div></td>
        { "data": 7 }, //  кнопка "в корзину" <td><button class="product__add-to-cart-button"  data-sb-id-or-vendor-code="' . $row['0'] . '" data-sb-product-name="' . $row['3'] . '" data-sb-product-price="' . $row['6'] . '" data-sb-product-quantity="1" data-sb-product-img="i/' . $row['7'] . '.webp"><i class="fas fa-cart-plus"></i></button></td>
        ],
        "ordering": false,
        responsive: true,
        "info":     false,
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Все"]],
        // "scrollY": "500px",
        // paging:  false,
        language: {
        search: "Поиск",
        lengthMenu: "Показывать по _MENU_ строк",
        paginate: {
            first:      "Первая",
            previous:   "<<",
            next:       ">>",
            last:       "Последняя"
        },
    },
        fixedHeader: true,
        orderCellsTop: true,
        columnDefs: [
            {
                searchable: false,
                targets: [0,2],
            }
        ],
        initComplete: function() {
            createDropdowns(this.api().unique());
        }
    } );
} );

Подключаемый файл БД выглядит примерно так:

JSON
1
2
3
{
  "data": [
    ["a00001","\u0410\u043d\u043a\u0435\u0440\u0430","\u0410\u043d\u043a\u0435\u0440 \u0431\u043e\u043b\u0442","\u0410\u043d\u043a\u0435\u0440\u043d\u044b\u0439 \u0431\u043e\u043b\u0442 8\u044545\u043c\u043c","8\u044545","\u0448\u0442.","4.5","gvozdiershenye"],["a00002","\u0410\u043d\u043a\u0435\u0440\u0430","\u0410\u043d\u043a\u0435\u0440 \u0431\u043e\u043b\u0442","\u0410\u043d\u043a\u0435\u0440\u043d\u044b\u0439 \u0431\u043e\u043b\u0442 8\u044560\u043c\u043c","8\u044560","\u0448\u0442.","4.7","gvozdiershenye"],["a00003",

@ИванЕжов · 12.10.2020, 20:19 **[ТС]**

Нашел вариант:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
"ajax": {
    "url": "arrays.txt",
    "dataSrc": function ( json ) {
      for ( var i=0, ien=json.data.length ; i<ien ; i++ ) {
        json.data[i][0] = '<td>'+json.data[i][1]+'</td>';
        json.data[i][1] = '<td>'+json.data[i][2]+'</td>';
        json.data[i][2] = '<td><a data-fancybox="images" data-caption="'+json.data[i][3]+'" href="i/'+json.data[i][7]+'.jpg"><img class="product__img" src="i/'+json.data[i][7]+'.jpg" alt="'+json.data[i][3]+'" title="'+json.data[i][3]+'"></a></td>';
        json.data[i][3] = '<td class="product__name">'+json.data[i][3]+'</td>';
        json.data[i][4] = '<td>'+json.data[i][4]+'</td>';
        json.data[i][5] = '<td>'+json.data[i][5]+'</td>';
        json.data[i][6] = '<td class="product__price">'+json.data[i][6]+'</td>';
        json.data[i][7] = '<td><div class="product__quantity"></div></td>';
        json.data[i][8] = '<td><button class="product__add-to-cart-button"  data-sb-id-or-vendor-code="'+json.data[i][0]+'" data-sb-product-name="'+json.data[i][3]+'" data-sb-product-price="'+json.data[i][6]+'" data-sb-product-quantity="1" data-sb-product-img="i/'+json.data[i][7]+'.jpg"><i class="fas fa-cart-plus"></i></button></td>';
      }
      return json.data;
    }
  },

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

JavaScript
1
json.data[i][8] = '<td><button class="product__add-to-cart-button"  data-sb-id-or-vendor-code="'+json.data[i][0]+'" data-sb-product-name="'+json.data[i][3]+'" data-sb-product-price="'+json.data[i][6]+'" data-sb-product-quantity="1" data-sb-product-img="i/'+json.data[i][7]+'.jpg"><i class="fas fa-cart-plus"></i></button></td>';

на выходе:

HTML5
1
<td><button class="product__add-to-cart-button" data-sb-id-or-vendor-code="<td>Анкера</td>" data-sb-product-name="<td class=" product__name"="">Анкерный болт 10х80мм" data-sb-product-price="undefined" data-sb-product-quantity="1" data-sb-product-img="i/<div class="product__quantity"></div>.jpg"&gt;<i class="fas fa-cart-plus"></i></button></td>

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

@bodynar · 12.10.2020, 20:48

Вам нужно excel контент отобразить в html форме?
Разбейте задачу на 2 пункта

1. Загрузка excel файла и парсинг содержимого (гуглится легко)
2. Генерация разметки html по заданному набору объектов (результат работы методов из п. 1 представьте как json с массивом объектов)

@ИванЕжов · 12.10.2020, 22:00 **[ТС]**

Благодарю!
Но, Ваш вариант уже решен (первый код в первом сообщении). Он - рабочий, всё "как надо". Одно "но" - мне не нравится, что - долго отрабатывает. Поэтому и приходится идти путями, мне неведомыми...
Вернусь к вопросу. Вот так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
        "ajax": 'arrays.txt',
        "deferRender": true, // Отложенный рендеринг для скорости
    "columns": [
        { "data": 0 },
        { "data": 1 },
        { "data": 2 },
        { "data": 3 ,
        render: function ( data, type, row ) {
        return '$'+ data;
    }
},
        { "data": 4 },
        { "data": 5 },
        { "data": 6 },
        { "data": 7 },
        ],

отработало. Дальше пока не продвинулся.
Наподобие этого:

JavaScript
1
2
3
4
5
6
{
    data: 'creator',
    render: function ( data, type, row ) {
        return data.firstName +' '+ data.lastName;
    }
}

у меня уже не получается - массив у меня не ассоциативный, не знаю как правильно вставить колонку: [1] / [,,] / ['1'] / data.[1] / data.[,,] /
В общем - решение пока не нашел.

Добавлено через 54 минуты
В общем-то, мне необязательно, чтобы вызов файла и дальнейшая работа с ним происходили по правилам DataTables. Если возможно сделать так чтобы это было здесь: <tbody><script>здесь</script></tbody> - будет даже проще. А то, так получается, что для того, чтобы вставить свой класс, приходится существенно изголяться. И, по мануалу, не всегда работает, а поддержка, бесплатно может ответить только на один вопрос.

@bodynar · 12.10.2020, 22:07

ИванЕжов, Опишите свою задачу в отрыве от кода

@ИванЕжов · 12.10.2020, 22:13 **[ТС]**

Идея какая - прайс-лист с картинками, приближенный к эсцелю, но в сети. Не Гугл-шмугл таблицы. Шустрый. Плюс корзина (без привязки к платежным системам, уведомление о заказе на почту продавцу и покупателю). Вроде всё.

@bodynar · 12.10.2020, 22:33

ИванЕжов, а эксель вам тогда зачем сейчас?
Опишите модели, способы работы с ними и генераторы html-содержимого, если на чистом js

@ИванЕжов · 12.10.2020, 22:47 **[ТС]**

Прайс-лист в эксцеле -> json -> array.txt -> сайт. Мускул-шмускул - не надо. На данный момент, надо просто тупо вставить данные из массива в мою разметку. Вот и всё. PHP - медленно. Содержимое генерить - сам, как-нибудь. На данный момент, выглядит так:

@bodynar · 13.10.2020, 00:04

ИванЕжов, не понимаю вас, какой массив, о чем вы?
Если вам нужно, чтобы через вашу страницу загружались данные из excel и визуализировались, то воспользуйтесь соответствующим решением (используется sheetJs)

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function(file) {
    var reader = new FileReader();
 
    reader.onload = function(e) {
      var data = e.target.result;
      var workbook = XLSX.read(data, {
        type: 'binary'
      });
 
      workbook.SheetNames.forEach(function(sheetName) {
        // Here is your object
        var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
        var json_object = JSON.stringify(XL_row_object);
        console.log(json_object);
 
      })
 
    };
 
    reader.onerror = function(ex) {
      console.log(ex);
    };
 
    reader.readAsBinaryString(file);
  }

@ИванЕжов · 13.10.2020, 01:23 **[ТС]**

Благодарю!
Только, похоже, забодался

я уже топтаться на одном месте. Буду делать на том, что работает. А, изучать еще одну штуковину, в которой я не понимаю - ну, честное слово, сил нет уже

.
Если бы Вы могли помочь именно в том, что я спрашивал - дело другое

.
Времени потерял, ничего толком не сделал. Ну, что... Учиться надо.
Еще раз благодарю за помощь!

@bodynar · 13.10.2020, 11:51

ИванЕжов, Не знаю пхп, но судя по коду - вы генерируете html таблицу на основе данных.
А уже на js используете DataTable (jQuery) для генерации таблицы

Если это так, то предлагаю вам посмотреть как можно сгенерировать таблицу без jQuery и использовать json-данные, распарсенные из excel (из примера выше). Либо же приведите эти данные в нужный формат, требуемый DataTable

Если честно - я уже не знаю что конкретно вам нужно) Поэтому, если все же это нужно - конкретизируйте в ответе на это сообщение

@ИванЕжов · 13.10.2020, 13:11 **[ТС]**

Попробую. Как мне этот массив:

JavaScript
1
a00001,Анкера,Анкер болт,Анкерный болт 8х45мм,8х45,шт.,4.5,gvozdiershenye,a00002,Анкера,Анкер болт,Анкерный болт 8х60мм,8х60,шт.,4.7,gvozdiershenye,a00003,Анкера,Анкер болт,Анкерный болт 8х80мм,8х80,шт.,5.7,gvozdiershenye,

вывести в моей html разметке?
То, чем вывел:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function() {
$.ajax({
  url: "test2.php",
  type:"GET",
  data: {},
  success: function(result){
      result = JSON.parse(result);
      alert(result);
    }
});
});

Добавлено через 23 минуты
Наверное, что-то, вроде этого:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
const data = JSON.parse(json);
 
$('#example').append(
  `<tbody>${data.response.items.map(n =>
    `<tr>
      <td>${n.title}</td>
      <td>${n.director}</td>
      <td>${n.year}</td>
      <td>${Object.values(n.photo).map(n => `<img src="${n}">`).join('')}</td>
    </tr>`).join('')}
  </tbody>`
);

Добавлено через 1 минуту
Мне непонятно - как обратиться к столбцу и вывести его там, где мне надо?

@bodynar · 13.10.2020, 13:50

ИванЕжов, Если вы указанный массив принимаете как строку из php, то оставьте свой ajax
Если же вы получаете эту строку из иного места - то ajax не нужен (если тот способ не предполагает такого использования)

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

Парсер строки excel данных
Для примера взял вашу строку и распарсил ее в массив объектов

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var excelData = "a00001,Анкера,Анкер болт,Анкерный болт 8х45мм,8х45,шт.,4.5,gvozdiershenye,a00002,Анкера,Анкер болт,Анкерный болт 8х60мм,8х60,шт.,4.7,gvozdiershenye,a00003,Анкера,Анкер болт,Анкерный болт 8х80мм,8х80,шт.,5.7,gvozdiershenye,";
 
var splitted =
    excelData
        .split(/a\d{5}/)
        .filter(x => x !== "")
        .map(item => {
            var parts = item.split(",").filter(x => x !== "");
 
            return ({
                shortName: parts[0],
                fullName: parts[1],
                specificationName: parts[2],
                size: parts[3],
                measurement: parts[4],
                price: parts[5],
                someNameWhichICantUnderstand: parts[6]
            });
        });

Далее полученные объекты уже используйте для своего генератора таблицы, например:
Примитивный генератор на js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
const DESTINATION_BODY_IDENTIFIER = "shop-table-boy";
 
function generateTableBody(storeData) {
    var container = document.getElementById(DESTINATION_BODY_IDENTIFIER);
 
    if (container) {
        storeData.forEach(item => {
            var tableRow = getTableRow(item);
 
            container.append(tableRow);
        });
    }
}
 
function getTableRow(storeDataItem) {
    var tableRow = document.createElement("tr");
 
    for (const key in storeDataItem) {
        if (storeDataItem.hasOwnProperty(key)) {
            const propertyValue = storeDataItem[key];
            
            var cell = document.createElement("td");
            cell.textContent = propertyValue;
 
            tableRow.append(cell);
        }
    }
 
    return tableRow;
}

@ИванЕжов · 13.10.2020, 19:16 **[ТС]**

Благодарю за помощь!

Новые блоги и статьи Все статьи Все блоги /
Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .

@bodynar 345 / 307 / 135 Регистрация: 14.03.2015 Сообщений: 1,158 Записей в блоге: 1
	12.10.2020, 20:48
	Вам нужно excel контент отобразить в html форме? Разбейте задачу на 2 пункта 1. Загрузка excel файла и парсинг содержимого (гуглится легко) 2. Генерация разметки html по заданному набору объектов (результат работы методов из п. 1 представьте как json с массивом объектов) 1

@bodynar 345 / 307 / 135 Регистрация: 14.03.2015 Сообщений: 1,158 Записей в блоге: 1
	12.10.2020, 22:07
	ИванЕжов, Опишите свою задачу в отрыве от кода 0

@ИванЕжов 1 / 1 / 0 Регистрация: 03.04.2019 Сообщений: 9
	12.10.2020, 22:13 [ТС]
	Идея какая - прайс-лист с картинками, приближенный к эсцелю, но в сети. Не Гугл-шмугл таблицы. Шустрый. Плюс корзина (без привязки к платежным системам, уведомление о заказе на почту продавцу и покупателю). Вроде всё. 0

@bodynar 345 / 307 / 135 Регистрация: 14.03.2015 Сообщений: 1,158 Записей в блоге: 1
	12.10.2020, 22:33
	ИванЕжов, а эксель вам тогда зачем сейчас? Опишите модели, способы работы с ними и генераторы html-содержимого, если на чистом js 0

@ИванЕжов 1 / 1 / 0 Регистрация: 03.04.2019 Сообщений: 9
	12.10.2020, 22:47 [ТС]
	Прайс-лист в эксцеле -> json -> array.txt -> сайт. Мускул-шмускул - не надо. На данный момент, надо просто тупо вставить данные из массива в мою разметку. Вот и всё. PHP - медленно. Содержимое генерить - сам, как-нибудь. На данный момент, выглядит так: Миниатюры 0

@ИванЕжов 1 / 1 / 0 Регистрация: 03.04.2019 Сообщений: 9
	13.10.2020, 01:23 [ТС]
	Благодарю! Только, похоже, забодался я уже топтаться на одном месте. Буду делать на том, что работает. А, изучать еще одну штуковину, в которой я не понимаю - ну, честное слово, сил нет уже . Если бы Вы могли помочь именно в том, что я спрашивал - дело другое . Времени потерял, ничего толком не сделал. Ну, что... Учиться надо. Еще раз благодарю за помощь! 1

@bodynar 345 / 307 / 135 Регистрация: 14.03.2015 Сообщений: 1,158 Записей в блоге: 1
	13.10.2020, 11:51
	ИванЕжов, Не знаю пхп, но судя по коду - вы генерируете html таблицу на основе данных. А уже на js используете DataTable (jQuery) для генерации таблицы Если это так, то предлагаю вам посмотреть как можно сгенерировать таблицу без jQuery и использовать json-данные, распарсенные из excel (из примера выше). Либо же приведите эти данные в нужный формат, требуемый DataTable Если честно - я уже не знаю что конкретно вам нужно) Поэтому, если все же это нужно - конкретизируйте в ответе на это сообщение 0

@ИванЕжов 1 / 1 / 0 Регистрация: 03.04.2019 Сообщений: 9
	13.10.2020, 19:16 [ТС]
	Благодарю за помощь! 0