如何使用DataTables使两行显示为一行？

Question

I have a page with a listing of groups here:

http://liquidchurch.com/groups/groups-browse/

It is using WordPress, DataTables, and the CCB Core API plugin and works well.

I need to add to each group a description, but the descriptions are too long to add to the end of the table, so I'd like for it to appear on a separate line but still be "attached" to the main row (about the group) both in visual appearance and for sorting purposes.

Here is my current code:

https://gist.github.com/davidshq/2c54fae1d3fd73bc6eda7dc537c1abed

Answer 1

// set up the datatablse
    var table = $('#example').DataTable();

    // list of descriptions for each person
    var desc = {
        "Ashton Cox": "Ashton is a baller",
      "Cedric Kelly": "Died in the last harry potter movie",
      "Garrett Winters": "this guy is cold af"
    };

    // loop each row
    $('#example tbody').find("tr").each(function(){

      // get the name which matches the keys in our
      // descriptions, in this case it's in the first col
        var name = $(this).find("td").eq(0).text();
      if(!name.length) return;

      if(undefined === desc[name]) return;
      table.row($(this)).child(desc[name]).show();

    });

Demo: https://jsfiddle.net/j767gs8t/1