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

时间:2022-11-21 14:17:44

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.

它使用WordPress,DataTables和CCB Core API插件,效果很好。

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

1 个解决方案

#1


0  

// 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

#1


0  

// 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