How to use the Tablesorter master detail (child row) with ajax ?

[don750421]

I want to used tablesorter to do master detail table.and I follow the demo to do.
https://mottie.github.io/tablesorter/docs/example-child-rows.html

my ajax return json is

but ajax return json string always " data = null "

then table showing

why ?

[Mottie]

Hi @don750421!

It appears that the JSON is not valid. The HTML in the rows array is not wrapped in quotes. jQuery won't parse invalid JSON, so make sure it is valid first by using http://jsonlint.com/

[don750421]

Sorry,because I see the method in tablesorter 's docs
https://mottie.github.io/tablesorter/docs/index.html#array_rows_as_jquery_object

So,it is seems infeasible.
Well,what is the valid Json that used to child row??

Thanks.

[Mottie]

I think you misunderstood me... the JSON results in the screenshot (please stop posting screenshots of code) that was shared above did not have quotes.

I saw:

<tr><td>r0c0</td><td>r0c1</td></tr><tr><td>r1c0</td><td>r1c1</td></tr>

when I should see

"<tr><td>r0c0</td><td>r0c1</td></tr><tr><td>r1c0</td><td>r1c1</td></tr>"

as a JSON result.

Anyway, if you want to add a child row, the <tr> just needs the child row class name (set by the cssChildRow option.

"<tr class='tablesorter-childRow'><td>r0c0</td><td>r0c1</td></tr><tr><td>r1c0</td><td>r1c1</td></tr>"

[don750421]

Sorry , I really misunderstood you,so I modify return json string.

{"total_rows":1,"headers":["Detail","NUMBER","REQUEST","CUST","NO","CLOSE","CREATEDATE","LASTUPDATEDATE","Edit","Delete"],"rows":["<tr><td rowspan='2'><a href='#' class='toggle'><img src='/images/Details16.png'/></a></td><td>AAC150204-01-01</td><td>efefef</td><td>AAC</td><td>svsvsv</td><td>N</td><td>2015/02/04 16:32:31</td><td></td><td></td><td></td></tr>","<tr class='tablesorter-childRow'><td colspan='4'><div class='bold'>testchildrow</div></td></tr>"]}

and my javascript is following..

    var gv_HandoverTable;
        var gv_row;
        $(function () {
            $("#divDisplayTable").resizable();
            $('.tablesorter-childRow td').hide();
            gv_HandoverTable.find('.tablesorter-childRow td').addClass('hidden');
        });

        gv_HandoverTable = $("#tJobHandover").tablesorter({
            theme: 'blue',
            sortList: [[0, 0]],
            cssChildRow: "tablesorter-childRow",
            widthFixed: true,
            widgets: ['zebra', 'stickyHeaders', 'filter','pager'],//'columnSelector',
            widgetOptions: {
                //columnSelector_container: '#QueryDBColSel',
                //columnSelector_columns: {
                //},
                //columnSelector_mediaquery: true,
                //columnSelector_mediaqueryState: false
            }
        })
        .tablesorterPager({
            // target the pager markup - see the HTML block below
            //?page=0&size=25&filter&sort[0]=1
            //?page=0&size=25&filter[0]=1373781600&filter[1]=800&sort[0]=1
            container: $(".pager"),
            ajaxUrl: "/Handler/Handler.ashx?WorkType=JOBHANDOVERLIST&page=0&size=20&filter[7]=N",
            page:0,
            size: 20,
            savePages: false,
            cssGoto: '.gotoPage',
            countChildRows: false,
            customAjaxUrl: function (table, url) {
                // need to dynamically update page size
                // since adding 'rows : size' in ajaxObject.data doesn't
                // dynamically update the size
                table.config.pager.ajaxObject.data.rows = table.config.pager.size;
                //$(table).trigger('changingUrl', url);
                return url;
            },
            ajaxObject: {
                dataType: 'json',
                type: 'POST',
                data: {
                    //SevName: $("#QuerySevName").val().trim(),
                    //SQLComm: $("#QuerySQLComm").val().trim()
                },
            },
            ajaxProcessing: function (data) {
                if (data && data.hasOwnProperty('rows')) {
                    return [data.total_rows, $(data.rows), data.headers];
                }
            },
            // css class names of pager arrows
            cssNext        : '.next',  // next page arrow
            cssPrev        : '.prev',  // previous page arrow
            cssFirst       : '.first', // go to first page arrow
            cssLast        : '.last',  // go to last page arrow
            cssGoto        : '.gotoPage', // page select dropdown - select dropdown that set the "page" option
            cssPageDisplay : '.pagedisplay', // location of where the "output" is displayed
            cssPageSize    : '.pagesize', // page size selector - select dropdown that sets the "size" option
            // class added to arrows when at the extremes; see the "updateArrows" option
            // (i.e. prev/first arrows are "disabled" when on the first page)
            cssDisabled    : 'disabled', // Note there is no period "." in front of this class name
            cssErrorRow: 'tablesorter-errorRow', // error information row

            output: 'Showing: {startRow} to {endRow} (Total:{totalRows})'
        });

There is an error in tablesorter.pager

And I also post my code on the fiddle http://jsfiddle.net/3hruotu5/

Have I missed something?

[Mottie]

Ok, I see a few issues:

• The JSON should not have multiple rows separated by commas

  { "rows" : [ "<tr>...</tr>","<tr class='tablesorter-childRow'>...</tr>" ] }

  unless your ajaxProcessing function does this:

  ajaxProcessing: function (data) {
      if (data && data.hasOwnProperty('rows')) {
          return [data.total_rows, $( data.rows.join('') ), data.headers];
      }
  },

  or actually, you can keep the current ajaxProcessing function if you combine the rows and remove the wrapping array:

  { "rows" : "<tr>...</tr><tr class='tablesorter-childRow'>...</tr>" }

• Don't use a rowspan or colspan in non-child rows. Using spans within multiple child rows is okay. Including a span in a non-child row shouldn't cause an error, but the row may not sort as you expect.

• The ajaxUrl option setting should contain placeholders for {page}, {size}, {sortList:sort} & {filterList:filter}.

  ajaxUrl: "/Handler/Handler.ashx?WorkType=JOBHANDOVERLIST&page={page}&size={size}&{sortList:sort}&{filterList:filter}",

[don750421]

Thanks Mottie,
I follow your suggest and modify my code.
JSON return string.

{"total_rows":1,"headers":["Detail","NUMBER","REQUEST","CUST","NO","CLOSE","CREATEDATE","LASTUPDATEDATE","Edit","Delete"],"rows":["<tr><td><a href='#' class='toggle'><img src='/images/Details16.png'/></a></td><td>AAC150204-01-01</td><td>efefef</td><td>AAC</td><td>svsvsv</td><td>N</td><td>2015/02/04 16:32:31</td><td></td><td></td><td></td></tr><tr class='tablesorter-childRow'><td><div class='bold'>rvervreverververv</div></td></tr>"]}

and modify ajax 's ajaxUrl option

ajaxUrl: "/Handler/Handler.ashx?WorkType=JOBHANDOVERLIST&page={page}&size={size}",

but the same error message at line #430

Why is there an error happen?

[Mottie]

Remove the array wrapping ([ ]) the `"rows" value:

Change this

"rows": [ "<tr>...</tr>" ], ...

to this:

"rows": "<tr>...</tr>", ...

[don750421]

Oh no, I forget to remove wrapping array.sorry.
but I have another question that the child row can't hide after ajax return.

I think it is because set the hide before ajax return.

$('.tablesorter-childRow td').hide();

Have I any method or api to hide child row after ajax return ?

[Mottie]

Try css:

.tablesorter-childRow td { display: none; }

[don750421]

Thanks @Mottie ,it is work for me.
I have some questions about tablesorter.
If I used the ajax to get data from database,
so .. all of filter, sort,paging is need to do on the server side ?
or I just query all the data from database and tablesorter plugin will to do this ?

Because I used the child row and ajax,but the paging,sort,filter is not work..
I don't know what happened?

[Mottie]

Yes, you will have to sort, filter and provide the correct number of selected rows, total rows & filtered rows to the pager when you use ajax. The pager doesn't have access to your database to get all of these values, nor can tablesorter sort a small part of a larger database without access to the entire database.

I think the best example of what you want is in the documentation under ajaxProcessing of objects returned from the server. The JSON contains the totalRows contained in teh database, the current filteredRows count, the set number of rows to be displayed (in the data HTML) and other various bits of information you might want to display in the pager output.

The pager also has a countChildRows option which is set to false by default which keeps the child row with it's parent. But really this option is for non-ajax tables.

[don750421]

Thanks for your patient explanation; it's all now clear as crystal.
but I am still curious about it's work that used another ajax method.

            $.ajax({
                url: "/Handler/SrcHandler.ashx?TableName=Ticket",
                type: 'POST',
                async: false,
                data: {
                    DataSrc: iDataSrc,
                    Datakey: iDataKey
                },
                success: function (response) {
                    if (response.Result)
                    {
                        $('#Ticket tbody').empty().append(response.ReturnText);
                        $('#Ticket').trigger('update');
                    }
                }
            });

When I click the column to sort. it's really can work.

[Mottie]

It's because within the pager addon/widget, I turn off tablesorter's sorting ability.

If you load in a table by a different method, then sorting will still be enabled. The reason it is disabled on the client side is because when a user clicks on the header to sort a column, they expect the sort to apply to the entire database, not just what is visible on the page.

If there was some way to differentiate the sort so the user knows exactly what they are sorting, then I don't see a problem with re-enabling client-side sorting.

[don750421]

OK, Thanks @Mottie .

If I using the child row and filter in my page,and it's multi sort key and multi filter column.
like this...

.../Handler/Handler.ashx?WorkType=OVERLIST&page=0&size=10&sort[1]=0&sort[2]=1&fcol[3]=AAA&fcol[5]=N"

How do I Parse the sort and fcol array on the server-side ?
Is this the only-way that parse the array ?

foreach (String key in Request.QueryString.AllKeys)
{
    Response.Write("Key: " + key + " Value: " + Request.QueryString[key]);
}

[Mottie]

I'm sorry, I don't know very much about server-side languages.

You will find a better answer if you asked that question over on Stackoverflow. But, make sure to search for the answer before asking, or your question will get closed without any response.

[Mottie]

I'm guessing this issue has been resolved, so I'm going to close it. If you continue to have problems, please feel free to continue the discussion in this thread.