How to Resize column filter plugin controls for jquery datatable

Question

how can i resize column filter plugin controls for jquery datatable.

I used below code for column filter plugin but it didnt changed...

 $("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" },
                                ]
            });

enter image description here

for more details please see this link

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

Marco Tizzoni · Accepted Answer · 2013-01-23 14:56:06Z

5

This works for me:

$('#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);
});

You still need to set the input width right after the table is built:

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

answered Jan 23, 2013 at 14:56

Marco Tizzoni

5424 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

laaposto · Accepted Answer · 2014-04-29 19:14:29Z

0

Two other things you can do: include this in css or style section:

.date_range_filter { width:3em; }

Also, you can set sRangeFormat inside columnFilter

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

(Or whatever code you want there. The {from} and {to} get replaced with the input field. Also note that trying to use table code in sRangeFormat didn't work for me - that seems like a code bug in columnFilter.)

Good luck!

edited Apr 29, 2014 at 19:14

laaposto

12.2k15 gold badges60 silver badges73 bronze badges

answered Apr 29, 2014 at 18:56

CurtinsCreations

111 bronze badge

Collectives™ on Stack Overflow

How to Resize column filter plugin controls for jquery datatable

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related