Creating rows child in a server-side processing datatable

MrJibus

I am using datatable with server side. When the datatable is complete, child rows are added :

        initComplete: function () {
          this.api().rows().every(function (rowIdx, tableLoop, rowLoop) {
            var data = this.data();
            if (data.message) {
              this
                .child(
                  $(
                    '<tr>' +
                    '<td><b>Message</b> : ' + data.message + '</td>' +
                    '<td></td>' +
                    '<td></td>' +
                    '<td></td>' +
                    '<td></td>' +
                    '<td></td>' +
                    '<td></td>' +
                    '<td></td>' +
                    '</tr>'
                  )
                )
                .show();
            }
          });

Problem : since i am using server side with pagination. On page 2, message are not displayed beacause initComplete is only fire once.

Solution : using another event like drawcallback.

        drawCallback: function () {
          this.api().rows().every(function (rowIdx, tableLoop, rowLoop) {
            var data = this.data();
            if (data.message) {
              this
                .child(
                  $(
                    '<tr>' +
                    '<td><b>Message</b> : ' + data.message + '</td>' +
                    '<td></td>' +
                    '<td></td>' +
                    '<td></td>' +
                    '<td></td>' +
                    '<td></td>' +
                    '<td></td>' +
                    '<td></td>' +
                    '</tr>'
                  )
                )
                .show();
            }
          });

Problem : it's not working the child rows are never displayed. Same thing with createdRow.

DataTables 1.10.21

kthorngren

Your drawCallback code works in this test case:
http://live.datatables.net/yezesaru/1/edit

Start with debugging your if statement (if (data.message) {) to make sure its behaving as expected.

If you still need help please post a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

MrJibus

Thank you @kthorngren.

After reviewing the code, removing this part :

        "responsive": {
          "details": {
            "display": $.fn.dataTable.Responsive.display.childRowImmediate,
            "type": 'none',
            "target": ''
          }
        },

allows the child rows to appear

kthorngren

Yes, the default Responsive child rows and detail child rows use the same space and can't be used at the same time. You can use Responsive in modal more like this example.

Kevin

MrJibus

Thank you !