CODEWITHSUNDEEP
datatables
user2767347
user2767347

Reputation: 175

How can we change width of search fields in DataTables

Can I change the width of search text fields in dataTables ?

I am writing following code right now but it is not working.

$('#example').dataTable()
          .columnFilter({   sPlaceHolder: "head:before",
                    aoColumns: [    { type: "text",width:"10px" },
                                { type: "date-range" },
                                                { type: "date-range" }
                        ]

        });

And if my dataTables is dynamically generated like as gven below:

$('#example').dataTable({
                                "aaData": aDataSet,
                                "aoColumns": [
                                    { "sTitle": "#","sWidth": "10px" },
                                    { "sTitle": "ID" },
                                    { "sTitle": "Staff Name" },
                                    { "sTitle": "Rig Days" },
                                    { "sTitle": "Manager"},
                                    { "sTitle": "Grade"},
                                    { "sTitle": "Tools"},
                                    { "sTitle": "Vacations"},
                                    { "sTitle": "Presently On"},
                                    ]
                            });
                            }

How to add Search field in this dynamically created DataTable to search by each column?

Upvotes: 13

Views: 47138

Answers (10)

Barış Enginbağ
Barış Enginbağ

Reputation: 1

div.dataTables_wrapper div.dataTables_filter input {width: 75%;margin: 0;}

If you write this in your css, the problem will be solved.

Upvotes: 0

shiva
shiva

Reputation: 730

None of the above solution worked for me; then I got this:

$(document).ready(function () {             
  $('.dataTables_filter input[type="search"]').css(
     {'width':'350px','display':'inline-block'}
  );
});

And it worked perfectly!

If you want to place a placeholder too inside the search box use this ..

$('.dataTables_filter input[type="search"]').
  attr('placeholder','Search in this blog ....').
  css({'width':'350px','display':'inline-block'});

And this will work for sure.

Upvotes: 20

Jithesh Jose
Jithesh Jose

Reputation: 1814

The only thing worked for me is this css.

$(document).ready(function(){

   $('#datatable-buttons_filter').css({"position":"relative","left":"-100px"});
});

Upvotes: 2

zus1
zus1

Reputation: 1

Nativ javascript solution.

$(document).ready(function() {
    $('#yourTableId').DataTable();

var addressTableFilter = document.getElementById('addressTable_filter');    
addressTableFilter.firstChild.getElementsByTagName('input')[0].style.width = "400px";
addressTableFilter.firstChild.getElementsByTagName('input')[0].setAttribute('placeholder', 'Search');
addressTableFilter.firstChild.removeChild(document.getElementById('addressTable_filter').firstChild.firstChild);
});

Dont forget to wrap everything inside document ready(if u using it)otherwise other lines may kick in before datatable is initiated and you will get error. This will also remove search label and add it as placeholder inside input box.

Upvotes: 0

mehmetgelmedi
mehmetgelmedi

Reputation: 68

it's worked for me

    <script>
    var datatable = $('#table').DataTable({
    ...<datatables properties>,
    initComplete: function () {
    $('.dataTables_filter input[type="search"]').css({ 'width': '350px', 'display': 'inline-block' });
    }
</script>

Upvotes: 3

Raja Sekar
Raja Sekar

Reputation: 1

I have used the below code while using dataTables

JS

$('#du_ft_table').dataTable( { <br/>
    "bProcessing": true,<br/>
    "bServerSide": true,<br/>
    scrollX: true,<br/>
    "sAjaxSource": "../server_processing_man.php?sourceC=du_ft&rights=1&mandatory=1&retailer_id=2725",
    "aoColumns": [
        null,
        null,
        null,
        null,
        null,
        null,

        null,
        null,
        null,
        null,
        { "mData": function(obj) { 
                return '<a class="btn btn-xs btn-primary" href="EBSNL_NW='+obj[0]+'" alt="Edit" title="Edit"><i class="fa fa-pencil-square-o"></i></a>';
        }}
    ]
} );

$('.dataTables_scrollFootInner tfoot th').each( function () {<br/>
    var title = $(this).text();<br/>
    if(title != '')  $(this).html( '<input type="text" placeholder="Search '+title+'" />' );<br/>
});

var duft_table = $('#du_ft_table').DataTable();

// Apply the search
duft_table.columns().every( function () {<br/>
    var that = this;<br/>

    $( 'input', this.footer() ).on( 'keyup change', function () {<br/>
        if ( that.search() !== this.value ) {<br/>
            that.search(this.value).draw();<br/>
        }<br/>
    } );
});

enter image description here

Upvotes: 0

Jacob Deskin
Jacob Deskin

Reputation: 113

here is the repeater

      <asp:Repeater ID="rptClients" runat="server">
                    <HeaderTemplate>
                        <table id="example" class="display">
                            <thead>
                                <tr style="color:#fff;">
                                    <th>Edit</th>
                                    <th>Client Name</th>
                                    <th>Address</th>
                                    <th>City</th>
                                    <th>State</th>
                                    <th>Zip</th>
                                    <th>Phone</th>
                                    <th>Fax</th>
                                    <th>Client Type</th>
                                    <th>Active</th>
                                </tr>
                                <tr id="filterRow">
                                    <td>Edit</td>
                                    <td>Client Name</td>
                                    <td>Address</td>
                                    <td>City</td>
                                    <td>State</td>
                                    <td>Zip</td>
                                    <td>Phone</td>
                                    <td>Fax</td>
                                    <td>Client Type</td>
                                    <td>Active</td>
                                </tr>
                            </thead>
                            <tfoot style="display:none;">
                                <tr>
                                    <td>&nbsp;</td>
                                </tr>
                            </tfoot>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <tr>
                            <td><div class="padBtm-05 padTop-10"><asp:Button runat="server" ID="btnEdit" Text="Edit" /></div></td>
                            <td>
                                <%# Container.DataItem("ClientName")%>
                            </td>
                            <td>
                                <%# Container.DataItem("ClientAddress")%>
                            </td>
                            <td>
                                <%# Container.DataItem("ClientCity")%>
                            </td>
                            <td>
                                <%# Container.DataItem("State")%>
                            </td>
                            <td>
                                <%# Container.DataItem("ClientZip")%>
                            </td>
                            <td>
                                <%# Container.DataItem("ClientPhone")%>
                            </td>
                            <td>
                                <%# Container.DataItem("ClientFax")%>
                            </td>
                            <td>
                                <%# Container.DataItem("ClientType")%>
                            </td>
                            <td>
                                <%# Container.DataItem("Active")%>
                            </td>
                        </tr>
                    </ItemTemplate>
                    <FooterTemplate>
                        </table>
                    </FooterTemplate>
                </asp:Repeater>

There are filters on all columns. Here I actually hide the edit column filter since it doesn't need one. If i don't render a filter for this column my filtering is off 1 column. In the javascript i target my table row which will end up being my title placeholder. Based on the placeholder name you can run an if statement that allows you to target the input element and set the width of the item. I have found setting the width of the filter sets the column width on the table.

 // apply the input styling
 $('#example thead td').each(function (i) {
            var title = $('#example thead th').eq($(this).index()).text();

            if (title == "Edit") {
                var serach = '<input type="text" style="display:none;" placeholder="' + title + '" />';
            } else if (title == "Client Name") {
                var serach = '<input type="text" style="width:370px;" placeholder="' + title + '" />';
            } else if (title == "Zip") {
                var serach = '<input type="text" style="width:50px;" placeholder="' + title + '" />';
            } else {
                var serach = '<input type="text" placeholder="' + title + '" />';
            }

            $(this).html('');
            $(serach).appendTo(this).keyup(function () { table.fnFilter($(this).val(), i) })
        });


  // Apply the search
        table.columns().every(function () {
            var that = this;

            $('input', this.footer()).on('keyup change', function () {
                if (that.search() !== this.value) {
                    that
                        .search(this.value)
                        .draw();
                }
            });
        });

Upvotes: 0

Mario Ene
Mario Ene

Reputation: 853

I applied this solution in my environment (Laravel 5.2, yajra/Laravel-DataTables 6.0, Bootstrap 3.x):

My table:

<table id="my-table" class="table table-striped table-hover" style="font-size: 80%">
<thead>
    <tr>
        <th class="input-filter" style="text-align:center;width: 5%">ID</th>
        ...
    </tr>
</thead>
<tbody></tbody>
<tfoot>
    <tr>
        <th style="text-align:center;width: 5%">ID</th>
        ...
    </tr>
</tfoot>

My script:

<script type="text/javascript">
    var dt = $('#my-table').DataTable({
        stateSave: true,
        responsive: true,
        processing: true,
        serverSide: true,
        order: [[ 0, "desc" ]],
        lengthMenu: [[5, 10, -1], [5, 10, "All"]],
        ajax: {
            url: '...',
        },
        columns: [
            {data: 'id', name: 'id',orderable:true,searchable:true},
            ...
        ],
        language: {
            url: '....'
        },
        initComplete: function () {
            this.api().columns('.input-filter').every(function () {
                var column = this;
                var input = document.createElement("input");

                // start - this is the code inserted by me
                $(input).attr( 'style', 'text-align: center;width: 100%');
                // end  - this is the code inserted by me

                $(input).appendTo($(column.footer()).empty())
                .on('keyup', function () {
                    var val = $.fn.dataTable.util.escapeRegex($(this).val());
                    column.search(val ? val : '', true, true).draw();
                });
            });
        }
    });
</script>

Upvotes: 1

Flea
Flea

Reputation: 11284

To change the search box width, all I had to do was go into my .css file and enter the following:

.dataTables_filter input { width: 300px }

Upvotes: 12

Se0ng11
Se0ng11

Reputation: 2333

try to use css to change the width

example 

.text_filter{
    width:45%;
    min-width:200px;
}

Upvotes: 1

Related Questions