Как изменить размер элементов управления фильтром столбцов для jquery datatable

как я могу изменить размер элементов управления плагина фильтра столбцов для jquery datatable.

Я использовал приведенный ниже код для плагина фильтра столбцов, но он не изменился...

 $("table#tblOscarNominees").dataTable().columnFilter(
            {
                //sPlaceHolder: "foot:before",
                "aoColumns": [
                                null, //{ "type": "number-range" },
                                {"type": "text", width: "50px" },
                                { "type": "select" },
                                { "type": "text", width: "50px" },
                                {"type": "number-range", width: "50px" },
                                { "type": "select" },
                                { "type": "select" },
                                { "type": "date-range", width: "50px" },
                                ]
            });

введите здесь описание изображения

для получения более подробной информации см. эту ссылку

http://www.reddyinfosoft.blogspot.in/2012/12/jquery-datatable-plugin-in-aspnet-using.html


jquery-datatables
person varaprasadreddy    schedule 11.12.2012    source источник

Ответы (2)


arrow_upward
6
arrow_downward

Это работает для меня:

$('#my-table th').bind('mouseup', function(event){
  var index = $(this).parent().children().index($(this));
  var colWidth = $(this).css('width');
  var input = $('#my-table tfoot tr input:eq(' + index +')');
  input.css("width", colWidth);
});

Вам все еще нужно установить ширину ввода сразу после построения таблицы:

$('#change-table tfoot tr').find(':input').each(function(index){
  var colWidth = $('#my-table thead tr th:eq(' + index + ')').css('width');
  $(this).css("width", colWidth );
});
person Marco Tizzoni    schedule 23.01.2013

arrow_upward
0
arrow_downward

Две другие вещи, которые вы можете сделать: включите это в раздел css или style:

.date_range_filter { width:3em; }

Кроме того, вы можете установить sRangeFormat внутри columnFilter.

.columnFilter({ sRangeFormat: "From {from}<br> to {to}" })

(Или любой код, который вы хотите там. {from} и {to} заменяются полем ввода. Также обратите внимание, что попытка использовать код таблицы в sRangeFormat у меня не сработала - это похоже на ошибку кода в columnFilter.)

Удачи!

person CurtinsCreations    schedule 29.04.2014