Ширина пейджера с возможностью обработки данных

У меня есть таблица данных Webix с огромным набором данных и пейджер. Все хорошо, кроме одной проблемы: ширина элемента пейджера фиксированная, поэтому большие числа (например, 1001) не видны. Есть ли способ преодолеть это? Вот пример:

var data = [];
for (var i = 1; i < 1011; i++)
    data.push({ id:i, package:"Some #"+i, section:i, size:i, architecture:i });                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        

var grida = webix.ui({
    container:"testA",
    view:"datatable",
    columns:[
        { id:"package", header:"Name",          width:200 },
        { id:"section", header:"Section",       width:120 },
        { id:"size",    header:"Size" ,         width:80  },
        { id:"architecture",    header:"PC",    width:60  }
    ],
    select:"cell",
    autowidth:true,
    autoheight:true,
    pager:{
        template:"{common.first()} {common.prev()} {common.pages()} {common.next()} {common.last()}",
        container:"paging_here",
        size:1,
        group:5
    },
    data:data
});

http://webix.com/snippet/fdb4d9e0


javascript user-interface datatables pager webix
person rannat    schedule 15.02.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Кажется, для этого нет никакого «родного» решения. Ширина введенных контейнеров пейджера установлена ​​​​на auto / 100% и, кажется, вставляется без какой-либо корректировки представления, которое он обслуживает; кнопки пейджинга имеют фиксированный размер и также отображаются независимо от представления. Обходной путь, который я нашел для этого, заключается в настройке количества кнопок

pager:{
  template:"{common.first()} {common.prev()} {common.pages()} {common.next()} {common.last()}",
  container:"paging_here",
  size:1,
  group:5 //set the desired number of buttons here 
},

или настроить CSS для кнопок, здесь пример придания им увеличенного равного поля, но вы также можете изменить ширину/размер кнопок пейджера

.webix_pager_item {
  margin-left: 15px;
}
.webix_pager_item_selected  {  
  margin-left: 15px;
}

См. документацию webix по пейджингу. В возвращенном объекте (например, grida) нет ни "секретных" методов, связанных с пейджингом, ни литералов, которыми вы можете манипулировать.

person davidkonrad    schedule 16.02.2016
comment
Спасибо за подсказку. После некоторых попыток я нашел другое решение: .webix_pager_item ,.webix_pager_item_selected{ width: 45px !important; } - person rannat; 16.02.2016
comment
@rannat, отлично! Это было что-то вроде этого, что я имел в виду, не мог сказать, какую именно настройку CSS вы могли бы сделать, так как я не знаю, как выглядит ваше представление с большими числами. - person davidkonrad; 16.02.2016