Search box above a jquery datatable

Question

I'm trying to put a simple searchbox above my datatable. Actually I got this far from another answer but can't manage to get the box do some actual search. I think I'd describe the situation as "Seems like I can't make the box talk with the datatable"

My datatable looks like this now.

var datatable = null;
$(document).ready(function () {
    $.extend(true, $.fn.dataTable.defaults, {
        "searching": false,
        "ordering": false
    });

    //var data = "3";

    @*var dataSourceUrl = "@Url.Action(  Inbox ? "InboxList" : "OutboxList" ,"Folder")";*@
    @*var dataSourceUrl = "@Url.Action( Inbox ? "InboxListByType" : "OutboxList" ,"Folder")";*@

    if (Type == 1) {
        var dataSourceUrl = "@Url.Action( Inbox ? "ERPListByType" : "OutboxList" ,"Folder")";
    } else if (Type == 2) {
        var dataSourceUrl = "@Url.Action( Inbox ? "InboxListByType" : "OutboxList" ,"Folder")";
    } else {
        var dataSourceUrl = "@Url.Action( Inbox ? "OutboxListByType" : "OutboxList" ,"Folder")";
    }



    datatable = $('#expandabledatatable').dataTable({
        //"sDom": "Tflt<'row DTTTFooter'<'col-sm-6'i><'col-sm-6'p>>",
        //"processing": true,
        //info: false,
        serverSide: true,
        ajax: {
            "url": dataSourceUrl,
            "data": { DocumentTypeId: DocumentTypeId },
            "type": "POST"
        },
        columns: [
            {
                "data": "Id",
                "render": function (data, type, row) {
                    return "<label><input type='checkbox' value='" + data + "' name='chkGrid'><span class='text'></span></label>";
                }
            },
            { "data": "@Html.Raw(Inbox ? "SenderCompany" : "ReceiverCompany")"  },
            { "data": "DocumentTypeName" },
            {
                "data": "RegistrationDate",
                "render": function (data, type, row) {
                    return moment(parseInt(data.substr(6))).format('DD.MM.YYYY hh:mm');
                }
            },
            {
                "data": "RegistrationCode",
                "render": function (data, type, row) {
                    console.log(row);
                    return "<a href='@Url.Action("View","Folder")/" + row["Id"] + "'>" + data + "</a>";
                }
            },
            { "data": "CustomsTransportType" },
            { "data": "VehicleIdNo" },
            { "data": null, "defaultContent": "" },
            { "data": "ConsignorName" },
            { "data": "ConsigneeName" },
            { "data": "TotalNoOfPackages" },
            { "data": "TotalGrossWeight" }
        ],
        iDisplayLength: 10,
        language: {
            "info": "Toplam kayıt : \_TOTAL\_<br/> Gösterilen : \_START\_ - \_END\_",
            "paginate": {
                "first": "İlk",
                "last": "Son",
                "next": "İleri",
                "previous": "Geri"
            }
        }
    });
    var table = $('#expandabledatatable').DataTable();

    $(function () { 
        $('#inpSearch').on('keyup', function () {
            alert(this.value);
            table
                .search(this.value)
                .draw();
        });
    });
});

It's clear I'm missing something but I can't understand what. Can anyone help me?

EDIT: This question was marked as a duplicate and having an answer on another question but I can't get those answers to work either. Probably I'm missing something.

I made some changes on datatable code and updated it inside the question. Datatables.net says columns.searchable is true by default so I removed that setting from my code.

I can get an alert when a key is pressed inside the textbox but no actual search gets performed. I'm using datatables version 1.10.5 by the way.

EDIT 2: I noticed each keystroke inside the text type input I put above the datatable causes the same query to be sent as a POST.

EDIT 3: I think this is not a case which I can handle with a jquery function. It seems like I need to do the job on server-side.

score 0 · Answer 1 · answered Mar 22 '16 at 14:38

0

You can use the DataTables api to filter the table.

All you need is your own input field with a keyup event.

something like this:

HTML:

<input type="text" id="myInputTextField">

JavaScript:

oTable = $('#myTable').DataTable();   
$('#myInputTextField').keyup(function(){
  oTable.search($(this).val()).draw() ;
})

i hope it works for you :) thanks

answered Mar 22 '16 at 14:38

Shady Alset

5,548
4
21
34

This was also recommended on http://stackoverflow.com/questions/5990386/datatables-search-box-outside-datatable but didn't work for me somehow :( – Ege Bayrak Mar 22 '16 at 14:50
yes it was recommended. have you seen this [jsfiddle](http://jsfiddle.net/3emvva83/) about using custom search box ? – Shady Alset Mar 22 '16 at 15:16
Not working either:( When I put an alert inside the function it fires but I can't get the filtering work. Also gives "table.fnFilter is not a function" error on console. I guess it is about version. I'm using datatables 1.10.5 – Ege Bayrak Mar 22 '16 at 18:12

score 0 · Answer 2 · answered Mar 25 '16 at 11:28

You can try with this code:

        //With Addition of following lines of code in your Datatable

        "fnServerParams": function (aoData) {
                        aoData.push
                        (
                            //search param
                            { "name": "searchParameter", "value": $("#inpSearch").val() }                                    
                        )
                    },

    // keyUp event
    oTable = $('#expandabledatatable').DataTable();   
        $('#inpSearch').on('keyup', function () {
          oTable.fnDraw();
        })

Search box above a jquery datatable

2 Answers2