column().search().draw question

switter65

I am trying to use the new api to search a table in an ASP.Net MVC app. I have 3 columns. The first column is rendered as a hyperlink using an int value from my controller. The second is just a text column. The third column pulls a boolean value and renders a string (yes/no). When I apply a global search, it works only for the second column. In other words, the search does not find 'Yes' or 'No' in the third column or the int value of the first column. I thought maybe it had to do with the original value of the third coming in as a boolean and the first column being a hyperlink. Regardless, I decided I wanted to split up the search using the column().search() syntax but cannot seem to get it to work, not even for the text search of the second column:

This works for the second column only:

        $('#btnSearch').click(function () {
            oTable.search($('#txtSearch').val()).draw();
        })

This does not work for any column, not even the second text column:

        $('#btnSearch').click(function () {
            oTable.column(1).search($('#txtSearch').val()).draw();
        })

Here is my DT initialization:

        $('#SupportClass1DataTable').DataTable({
            "serverSide": true,
            "processing": true,
            "ajax": url,
            "ordering": true,
            "dom": '<"top"prl<"clear">>t<"bottom">pi<"clear">',
            "pageLength": 10,
            "autoWidth": false,
            "columns": [
                { // create a link column using the value of the column as the link text
                    "data": "SupportClass1Id",
                    "width": "20%",
                    "render": function (oObj) { return "<a href='#' onclick='editItem(\"" + oObj + "\")'>" + oObj + "</a>"; },
                },
                { "data": "SupportClass1Name", "sWidth": "70%" },
                { // convert boolean values to Yes/No
                    "data": "Active",
                    "width": "7%",
                    "render": function (data, type, full) {
                        if (data == true)
                        { return 'Yes'; }
                        else
                        { return 'No'; }
                    }
                }
            ]
        })

Any help is appreciated

switter65

btw, I am using version 1.10.2

allan

"serverSide": true,

The search (/filter) is being done at the server-side. So what you have rendered the data into on the client-side is irrelevant since the server doesn't know about that. You need to modify your server-side processing script to provide the filtering options you are looking for.

Allan

switter65

Thanks Allen, I knew I was initially searching on the server but thought the search() call was client-side.

I want to modify the ajax URL route parameters being passed to my controller prior to calling search().draw(). Could you point me to some documentation showing me how?
Example, I want to change the activeOnly param based on a unbound checkbox value:

"ajax": @Url.Action("SupportClass1Search", "SupportClass1", new { activeOnly = true }) 

to

"ajax": @Url.Action("SupportClass1Search", "SupportClass1", new { activeOnly = false })

Would I use custom HTTP variables?

allan

but thought the search() call was client-side.

It is. It is a client-side method that will trigger a search, but since the search is actually don't on the server-side, it is the server-side script that needs to take this into account.

I want to modify the ajax URL route parameters

I'm afraid I don't recognise the @Url.Action syntax (ASP.NET is not something I am well versed it). Does it just return a string that the Ajax call is made to? If so, use ajax.data to modify the data.

Allan

switter65

Yes, @Url.Action just returns a string to a method on the server-side. In my case, "SupportClass1" is a server-side class, "SupportClass1Search" is the method within the class, and activeOnly is a parameter I want to be able to manipulate each time I call search():

"/SupportClass1/SupportClass1Search?activeOnly=True"

Btw, DT is a great plugin!

switter65

I figured it out. I had to add the following (based on Allen's reply) to my initialization:

        "ajax": {
            "url": url,
            "data": function (d) {
                d.activeOnly = $('#activeOnly').is(':checked');
            }
        },

I also had to add the activeOnly parameter to my class and wire the click event of the checkbox to draw the table.

rgwenceslao

Hi, maybe you guys can help. I know this may sound very simple but I've spent one whole day researching already but to no avail. Here's my simple problem: I already have a client-side column search. My question is, how do I catch this on the server side? What event or functions/variables should I be tweaking in my class?

allan

Use the columns[i][search][value] property that the client-side sends to the server. See the manual for all of the properties sent to the server.

Allan