Как отформатировать таблицу DataTables?

@spaceship1226 · Регистрация: 25.04.2019

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

При разработке страницы использовал плагин DataTables.Вот ссылка на страничку http://montaj.vianor-konakovo.ru/goods.html
Хочу убрать то есть перевести на русский язык все английские надписи плагина.Пока не получается. Еще не получается сузить
EditBox в колонке заказ. И не пойму почему таблица рисует достаточно высокие строки. Мне надо ниже. Подскажите как мне добиться желаемого.

@Уф · 22.11.2019, 17:55

в таблицах пропиши классы компактно

HTML5
1
<table id="tblWhAdd" class="display compact cell-border" cellpadding="3px" width="100%">

перед подключением плагина вставь локализацию и свои стандартные настройки можешь там вписать

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* DataTables default */
$.extend( true, $.fn.dataTable.defaults, {
    "oLanguage": {
        "sProcessing":"Подождите...",
        "sLengthMenu":"Показать _MENU_ записей",
        "sZeroRecords":"Записи отсутствуют.",
        "sEmptyTable":"Записи отсутствуют.",
        "sInfo":"Записи с _START_ до _END_ из _TOTAL_ ",
        "sInfoEmpty":"Записи с 0 до 0 из 0 ",
        "sInfoFiltered":"(в _MAX_)",
        "sInfoPostFix":"",
        "sSearch":"Поиск: ",
        "sUrl": "",
        "oPaginate": {
            "sFirst":"Первая",
            "sPrevious":"Предыдущая",
            "sNext":"Следующая",
            "sLast":"Последняя"
        }
    }
});

@spaceship1226 · 22.11.2019, 18:21 **[ТС]**

не могли бы вы на моем коде показать куда надо вставить этот код у меня инициация таблицы прописана в файле goods1003.js?

@Уф · 22.11.2019, 22:07

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
/* DataTables default */
$.extend( true, $.fn.dataTable.defaults, {
    "oLanguage": {
        "sProcessing":"Подождите...",
        "sLengthMenu":"Показать _MENU_ записей",
        "sZeroRecords":"Записи отсутствуют.",
        "sEmptyTable":"Записи отсутствуют.",
        "sInfo":"Записи с _START_ до _END_ из _TOTAL_ ",
        "sInfoEmpty":"Записи с 0 до 0 из 0 ",
        "sInfoFiltered":"(в _MAX_)",
        "sInfoPostFix":"",
        "sSearch":"Поиск: ",
        "sUrl": "",
        "oPaginate": {
            "sFirst":"Первая",
            "sPrevious":"Предыдущая",
            "sNext":"Следующая",
            "sLast":"Последняя"
        }
    }
});
 
$('#goods').addClass('display compact cell-border').attr('cellpadding','3px').attr('width', '100%');
 
    $('#goods').DataTable( {
         
         "order": [[ 0, "desc" ]],
         select: true,
         scrollY: true,
         scrollX:true,
         "sRowSelect": "single",
        "processing": true,
        "bPaginate": true,
        "bSort": true,
        "serverSide": true,
        "autoWidth":false,
        // "ajax": "proc.php"
        "ajax": {
        url:"server_processinggoodswork.php",
        data:function(d){d.idclient=idclient;
        d.otbor=data2;
        }
        },
        "columnDefs": [
        {"sWidth": "20px", "aTargets": [ 8  ] },
            
         {
     className:"inputEdit",targets:[9],
     render:function(data,type,row){
     return '<input type="text" id="Editbox1"'+// meta.row().index() 
     'class="myedit"   value="" spellcheck="false",  maxlength=5>'
         }},
     { className:"position",targets: [10],
     "render": function ( data, type, row ) {
       return '<img src="sort_asc.png">'
     }
   },
   {
     "visible": false,  "targets": [ 0 ]
   }   
        ]
        //"ajax": "proba9.php"
    
 
    } );

@spaceship1226 · 23.11.2019, 14:57 **[ТС]**

внес изменения.Но страница перестала грузиться подскажите как скорректировать код чтобы добиться его работоспособности?

Добавлено через 2 часа 28 минут
перевести английские термины с вашей помощью удалось.Как уменьшить высоту строк?

@spaceship1226 · 24.11.2019, 08:57 **[ТС]**

Не уменьшаются они.Мне не удалось.Где внести изменения в код?Может уменьшить шрифт выводимойго в таблице текста?

@Уф · 24.11.2019, 15:19

ищи в datatable.css

CSS
1
2
3
4
table.dataTable.compact tbody th,
table.dataTable.compact tbody td {
  padding: 4px;
}

и поставь там 0px

@spaceship1226 · 24.11.2019, 16:10 **[ТС]**

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

@Уф · 24.11.2019, 16:39

в файле http://montaj.vianor-konakovo.ru/goods.css
если че свойства через двоеточия пишутся, а не через равно, а зачем тебе еще уже строчки? вроде и так нормально, а то всю в кучу сольется

@spaceship1226 · 24.11.2019, 17:31 **[ТС]**

Учусь управлять внешним видом таблицы. Чтобы знать как настраивать внешний вид при необходимости.EditBox например слишком широкий там достаточно поля для ввода 3 цифр.А выводится широченный я не знаю как сделать его более узким.

@spaceship1226 · 25.11.2019, 13:06 **[ТС]**

И c EditBox разобрался осталось два вопроса
1.как добиться центрирования значка плюса в последней колонке в корзину и элемента EditBoxа также содержимого колонки остаток почему то она не центрируется?
2.как добиться потриадного вывода цены? не так как сейчас например 5850 а 5 850.Чтобы триады разделялись пробелом?

@spaceship1226 · 26.11.2019, 14:32 **[ТС]**

как отформатировать выводимые цифры, чтобы они выводились с разделением пробелом каждых трех цифр?

@Уф · 26.11.2019, 16:55

https://datatables.net/referen... rmatNumber

Добавлено через 49 секунд
зря ты шрифт уменьшил, неудобно стало читать таблицу, покупатели разбегуться

Добавлено через 7 минут
чтоб по центру сделать напиши в стилях

CSS
1
td.center { text-align: center }

а в коде таблицы "columnDefs": укажешь ей className: 'center'

@spaceship1226 · 27.11.2019, 14:18 **[ТС]**

внес изменения в good103.js добавив

JavaScript
1
2
3
4
5
 $('#goods').DataTable( {
        "language": {
    
    "thousands": " "
  },

на форматирование чисел в колонке цена не повлияло где я ошибся что не так сделал?

@spaceship1226 · 28.11.2019, 13:40 **[ТС]**

И с форматированием чисел разобрался.Все получилось. Теперь нужно в отдельной колонке например 2-Модель задать выравнивание текста left.Определял при инициации таблицы класс

JavaScript
1
{className:"Model",targets:[2],

в css прописываю

CSS
1
2
3
4
.Model
{
text-align:Left ;
}

Но выравнивание в колонке не изменяется. Где я допускаю ошибку? Как мне достичь желаемого?

@Уф · 29.11.2019, 16:03

открой свой файл http://montaj.vianor-konakovo.ru/goods.css
ты забыл точку поставить перед Модел

@spaceship1226 · 29.11.2019, 18:20 **[ТС]**

точку поставил-не повлияло(((

@Уф · 30.11.2019, 18:27

попробуй так

CSS
1
2
3
4
.Model
{
text-align:left !important;
}

@spaceship1226 · 30.11.2019, 20:25 **[ТС]**

так сработало. благодарю за подсказку

Добавлено через 1 час 38 минут
Что надо сделать чтобы вертикальная полоса прокрутки таблицы находилась сразу же справа от таблицы по ее границе а не справа в конце страницы как сейчас?

@Уф · 30.11.2019, 23:41

HTML5
1
<div id="Layer1" style="position:absolute;text-align:left;left:10px;top:363px;width:950px;height:1000px;z-index:20;">

убери height:1000px

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем

@spaceship1226 5 / 5 / 1 Регистрация: 25.04.2019 Сообщений: 551

	Как отформатировать таблицу DataTables? 21.11.2019, 13:04. Показов 5492. Ответов 34 Метки нет (Все метки) При разработке страницы использовал плагин DataTables.Вот ссылка на страничку http://montaj.vianor-konakovo.ru/goods.html Хочу убрать то есть перевести на русский язык все английские надписи плагина.Пока не получается. Еще не получается сузить EditBox в колонке заказ. И не пойму почему таблица рисует достаточно высокие строки. Мне надо ниже. Подскажите как мне добиться желаемого. 0

@spaceship1226 5 / 5 / 1 Регистрация: 25.04.2019 Сообщений: 551
	22.11.2019, 18:21 [ТС]
	не могли бы вы на моем коде показать куда надо вставить этот код у меня инициация таблицы прописана в файле goods1003.js? 0

@spaceship1226 5 / 5 / 1 Регистрация: 25.04.2019 Сообщений: 551
	23.11.2019, 14:57 [ТС]
	внес изменения.Но страница перестала грузиться подскажите как скорректировать код чтобы добиться его работоспособности? Добавлено через 2 часа 28 минут перевести английские термины с вашей помощью удалось.Как уменьшить высоту строк? 0

@spaceship1226 5 / 5 / 1 Регистрация: 25.04.2019 Сообщений: 551
	24.11.2019, 08:57 [ТС]
	Не уменьшаются они.Мне не удалось.Где внести изменения в код?Может уменьшить шрифт выводимойго в таблице текста? 0

@spaceship1226 5 / 5 / 1 Регистрация: 25.04.2019 Сообщений: 551
	24.11.2019, 16:10 [ТС]
	внес изменения но вижу что строке мешает стать ниже элемент EditBox,выводимый в предпоследней колонке заказ.Каким образом можно корректировать размеры этого EditBox?интересует и высота и ширина. 0

@Уф 890 / 725 / 447 Регистрация: 13.07.2015 Сообщений: 2,277
	24.11.2019, 16:39
	в файле http://montaj.vianor-konakovo.ru/goods.css если че свойства через двоеточия пишутся, а не через равно, а зачем тебе еще уже строчки? вроде и так нормально, а то всю в кучу сольется 0

@spaceship1226 5 / 5 / 1 Регистрация: 25.04.2019 Сообщений: 551
	24.11.2019, 17:31 [ТС]
	Учусь управлять внешним видом таблицы. Чтобы знать как настраивать внешний вид при необходимости.EditBox например слишком широкий там достаточно поля для ввода 3 цифр.А выводится широченный я не знаю как сделать его более узким. 0

@spaceship1226 5 / 5 / 1 Регистрация: 25.04.2019 Сообщений: 551
	25.11.2019, 13:06 [ТС]
	И c EditBox разобрался осталось два вопроса 1.как добиться центрирования значка плюса в последней колонке в корзину и элемента EditBoxа также содержимого колонки остаток почему то она не центрируется? 2.как добиться потриадного вывода цены? не так как сейчас например 5850 а 5 850.Чтобы триады разделялись пробелом? 0

@spaceship1226 5 / 5 / 1 Регистрация: 25.04.2019 Сообщений: 551
	26.11.2019, 14:32 [ТС]
	как отформатировать выводимые цифры, чтобы они выводились с разделением пробелом каждых трех цифр? 0

@Уф 890 / 725 / 447 Регистрация: 13.07.2015 Сообщений: 2,277
	29.11.2019, 16:03
	открой свой файл http://montaj.vianor-konakovo.ru/goods.css ты забыл точку поставить перед Модел 0

@spaceship1226 5 / 5 / 1 Регистрация: 25.04.2019 Сообщений: 551
	29.11.2019, 18:20 [ТС]
	точку поставил-не повлияло((( 0

@spaceship1226 5 / 5 / 1 Регистрация: 25.04.2019 Сообщений: 551
	30.11.2019, 20:25 [ТС]
	так сработало. благодарю за подсказку Добавлено через 1 час 38 минут Что надо сделать чтобы вертикальная полоса прокрутки таблицы находилась сразу же справа от таблицы по ее границе а не справа в конце страницы как сейчас? 0

Как отформатировать таблицу DataTables?

Решение