Search in child rows coming from ajax Call

maniya

Hi, I had the code working where i can load the child rows from the ajax call and keep them open even after the reload.

My next take is to do a search for the child rows who database is coming through ajax, cannot use hidden fields option as i had that coming coming from a separate query

tried many ways in google forums but could not find how can i implement it,

Following this post

https://stackoverflow.com/questions/30471089/datatables-search-child-row-content/30476168

but unable to fix it how should i do it, because i have some links which does the crud operations and redraw the table, now i want to implement the search so even after the redraws i should be able to find the data and keep the child rows open where the search is found

Thanks

I have nothing written as such, but will try to give a shot, if something can work

kthorngren

I have some questions to better understand your implementation and requirements.

cannot use hidden fields option as i had that coming coming from a separate query

Are you saying that your child details are loaded using ajax as described in the Ajax loaded row details example?

If so then doing a search might not work as desired since the row data is not fetched until the child row is opened.

implement the search so even after the redraws i should be able to find the data and keep the child rows open where the search is found

How are you performing the search, ie, the default global search input or a custom input?

You want to child rows to open that match the search. For the other rows do you just want the child rows closed or those rows also filtered from the table?

Understanding these questions will help to decide the best way to perform the search.

Kevin

kthorngren

I updated one of my examples to provide a child search function. It uses a specific input for searching the child rows and it uses extra details attached to each row but not hidden columns. In this case the extension comes from the original ajax response and the office comes from additional data (simulated) from another source. drawCallback is used to simulate the additional data from another source.

It uses the rows().indexes(), filter() and toArray() APIs to get the row indexes that match the search criteria. It will look for both extension and office matches. To try it search for london in the Child Search input. Page 1 and 3 should have results. There are no rows on page 2 with London office.

While searching for london on page 3 click reload for an ajax.reload(). The London child rows stay open. clear the search and all the rows close. Manually open one and click reload again. Only that row will show.

Hope this helps get you started.
http://live.datatables.net/benebehi/1/edit

Kevin

maniya

Thanks for the Update, I was following yur code but i am still missing the keypoint, my format function coming like this;

function format(id) {
$.ajax({
        url: page.php',
        type: 'POST',
        data: 'id=' + id,
        async: false,
        success: function(_html) {
            result = _html;
        }
    });
    return result;
}

this piece runs when i Open the Child row from parent row lik this;

row.child(format(rowid)).show();
tr.addClass('shown');

so that function function is triggered and displays under the tr > td - it gets whole html code from the ajax call, so i need not build tables, i just sends me the tables data and i just show it

now I have the code where it keeps the plus and minus intact when loading ajax and reloading tables using Array Push and Pop just like your example,

I want to use the global Search feature to search for the value, the ajax call is returning me some fields like 4 columns it is sending me

hope it makes sense now

maniya

and i m doing a reload like this:

table.ajax.reload(function () {

                        table.rows(rowIds).every(function (row, index, array) {
                            table.row(row).child(format(id)).show();
                            this.nodes().to$().children('td:first').html('-');
                        });

                    }, false);

kthorngren

Like I mentioned before if you are fetching the child data each time it is opened then searching the child will be problematic. When you first initialize the Datatable there won't be any child data to search unless you open all the rows.

In the format function you have the row ID. You can use this ID to update the row data for the search to work. Similar to what I did in the rowCallback.

Using the default search input will also filter the parent rows. Is this what you want? The easiest way to use the default search input is to place the child data in hidden columns. By default the global search searches on each keystroke which could cause a lot of fluctuation with opening and closing child rows as the search value is typed. I suggest replacing the default search with your own that searches on input change.

Instead of using an ajax call for the child rows can you return the child data in the Datatables ajax request? That data would be reloaded each time ajax.reload() is used. Plus it would eliminate the delays from executing the ajax request for each child.

Kevin