Server side custom search

richb78uk

I have a datatable returning data via Ajax and searching server side using the built in search box, however I want to be able to add additional fields for the search for example a status drop down (see mockup-image). I don't really know where to start with this if anyone can help get me started.

Below is my current initialisation script

$('#ProvisionalLeadsTable').DataTable({
                "processing": true,
                "serverSide": true,
                "filter": true,
                "orderMulti": false,
                "stateSave": true,
                "lengthChange": false,
                "pageLength": 5,
                "stateDuration": -1,
                "stateLoadParams": function (settings, data) {
                    $("#ProvisionalLeadsTable_filter input").val(data.search.search);
                },
                "ajax": {
                    "url": "/leads/provisionalLeadsListPaged",
                    "dataSrc": "data",
                    "type": "POST",
                    "datatype": "json"

                },
                "columns": [
                    { "data": "name", "name": "Name" },
                    { "data": "company", "name": "Company Name", "order": "asc" },
                    { "data": "leadSource", "name": "Lead Source" },
                    { "data": "numberOfPeople", "name": "Number Of People" },
                    { "data": "deliveryLocation", "name": "Del Location" },
                    { "name": "actions", "orderable": false, "className": "text-nowrap text-right" }
                ],
                "columnDefs": [
                    {
                        "render": function (data, type, row) {
                            var inner = '<a class="btn btn-xs btn-primary" href="/leads/ViewProvisionalLead/' +
                                row["provisionalLeadId"] +
                                '"><i class="fa fa-eye"></i> View</a>&nbsp;' +
                                '<a class="btn btn-xs btn-primary" href="/leads/ConvertProvisionalLead/' +
                                row["provisionalLeadId"] +
                                '">&nbsp;<i class="fa fa-pencil"></i>&nbsp;Convert to Lead</a>';


                            return inner;
                        },
                        "targets": -1
                    }
                ],
                "pagingType": "simple_numbers",
                "searchDelay": 800,
                "language": {
                    "processing":
                        "<div id=\"provisionalLeadsProcessing\" class=\"divProcessing\"><div class=\"sk-spinner sk-spinner-three-bounce\"><div class=\"sk-bounce1\"></div><div class=\"sk-bounce2\"></div><div class=\"sk-bounce3\"></div></div></div>"
                }
            });

bindrid

I have a select box in each header column. This code checks each one and adds the search critera from the select box to the appropriate place in the parameters before being passed to the server.

  "ajax": {
                    contentType: "application/json; charset=utf-8",
                    url: "wsSample.asmx/GetDTDataUnserializedObject",
                    type: "Post",

                    dataSrc:"d.data",
                    data: function (dtParms) {
                        $('#example thead select').each(function (i, sel) {
                            var sel = $(sel).val();
                            dtParms.columns[i].search.value = sel;
                        });
              
                        // notice dtParameters exactly matches the web service parameter name
                        return JSON.stringify({ dtParameters: dtParms });
                    },
                    beforeSend: function ( jqXHR,  settings) {
                        console.log(settings);
                    },
                    error: function (error) {
                        console.log(x);
                    }
                },