Как отформатировать таблицу 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

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .
Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .

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

	Как отформатировать таблицу DataTables? 21.11.2019, 13:04. Показов 5430. Ответов 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?

Решение