My requirement is to display the show entries in textinput rather in dropdown

sreecharanm

Instead of the dropdown, I want the text input . and I can enter whatever the input I want in that. Is that possible

colin

Like this?

Colin

sreecharanm

@colin , my question is not search for the column, i want to display show entries menu (which is a dropdown) i want that to display as text input and i if enter the number suppose 20, 20 records has to display in the page if i give 30 , 30 records should display. there should not be any pre-defined count

colin

This should do it for you: http://live.datatables.net/dafisuro/1/edit

Colin

sreecharanm

@colin , yes, that will work for me . thanks for that i wrote that using keyup instead of onchange. is there any possibility that we can position the textinput in show entries position.

sreecharanm

@colin

<script type="text/javascript">



    $(document).ready(function() {
    var myTable = $('#example').DataTable( {
        responsive: true,
        "bLengthChange": false
    } );

    // $('#myInputTextField').keyup(function(){
    //     myTable.lengthMenu($(this).val()).draw() ;
    // })

    $('#pageSize1').keyup(function ()
        {
            myTable.page.len( $(this).val() ).draw();
        }
    );
}


);
    </script>

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

Yep, you can use dom for that - there are some examples on the reference page,

Colin

kthorngren

Also look at this example:
https://datatables.net/examples/advanced_init/dom_toolbar.html

Kevin

sreecharanm

/* Solution */
var datatable = $('#dataset').DataTable({
dom: '<"div.toolbar">frtip'
});

/* positioning the customized show entries text input field */

 $("div.toolbar").html(`<label
 style="padding-right:10px;">show</label><input
  id="pageSize1"
 style="margin-top:5px;" size="4"/><label
 style="padding-left:10px;">entries</label>`);

/* keyup functionality for the show entries text input field */

        $('#pageSize1').keyup(function () {
            datatable.page.len($(this).val()).draw();
        });

/* assigning the default length to the show entries text input field */

        info = datatable.page.info();
        var lengthMenuSetting = info.length;
        //        alert(lengthMenuSetting);
        document.getElementById('pageSize1').value = lengthMenuSetting;