Multiple rows in one of the columns

aditya_28

I apologize in advance if I am missing something from this post as its my first time posting, but here is my problem:

I did some digging around but I couldn't find an example of trying to have multiple rows in one of my columns.
Below is my js function that I use to access the api. (Note: I am evaluating boolean values and returning text for the rows that i intend to have)

function loadDataTable() {
    //will populate the data table from the cdn that I have used on id DT_load
    dataTable = $('#DT_load').DataTable({
        "ajax": {
            "url": "/api/client",
            //this is a get request
            "type": "GET",
            "datatype": "json"
        },
        "columns": [
            //these are all column names filled with data
            { "data": "name", "width": "20%" },
            { "data": "contactNumber", "width": "20%" },
            { "data": "emailAddress", "width": "20%" },
            {
                "rows": [
                    {
                        "data": "bookkeeping",
                        "render": function (data) {
                            if (data)
                                return "Bookkeeping";
                            else 
                                return "";
                        }, "width": "15%"
                    },
                    {
                        "data": "personal_Income_Taxation",
                        "render": function (data) {
                            if (data)
                                return "Personal Income Taxation";
                            else
                                return "";
                        }, "width": "15%"
                    },
                    {
                        "data": "self_Employed_Business_Taxes",
                        "render": function (data) {
                            if (data)
                                return "Self Employed Business Taxes";
                            else
                                return "";
                        }, "width": "15%"
                    },
                    {
                        "data": "gST_PST_WCB_Returns",
                        "render": function (data) {
                            if (data)
                                return "GST/PST/WCB Returns";
                            else
                                return "";
                        }, "width": "15%"
                    },
                    {
                        "data": "tax_Returns",
                        "render": function (data) {
                            if (data)
                                return "Tax Returns";
                            else
                                return "";
                        }, "width": "15%"
                    },
                    {
                        "data": "payroll_Services",
                        "render": function (data) {
                            if (data)
                                return "Payroll Services";
                            else
                                return "";
                        }, "width": "15%"
                    },
                    {
                        "data": "previous_Year_Filings",
                        "render": function (data) {
                            if (data)
                                return "Previous Year Filings";
                            else
                                return "";
                        }, "width": "15%"
                    },
                    {
                        "data": "government_Requisite_Form_Applications",
                        "render": function (data) {
                            if (data)
                                return "Government Requisite Form Applications";
                            else
                                return "";
                        }, "width": "15%"
                    },
                    {
                        "data": "other",
                        "width": "15%"
                    }
                ], "width": "20%"
            },
            { "data": "nextStep", "width": "20%" },
            //the last column is the delete and edit button
            {
                //need to pass the id when editing
                "data": "id",
                //need to render 2 buttons
                "render": function (data) { //this data will have the id of the client
                    //we want to return a div with 2 buttons
                    return ` <div class="text-center">
                                <a href="Admin/Edit?id=${data}" class="btn btn-success text-white p-1" style="cursor:pointer;width:100px">Edit</a>
                                <a class="btn btn-danger text-white p-1" style="width:100px">Delete</a>
                             </div>`;
                    //make the render have a width of 30%             
                }, "width": "30%"
            }
        ],
        "language": {
            "emptyTable": "No existing clients"
        },
        "width": "100%"
    });
};

Below is my HTML table that I used

<div class="col-12 border p-3 mt-3">
    <table class="table table-striped border" id="DT_load">
        <thead>
            <tr>
                <th>Name</th>
                <th>Contact Number</th>
                <th>Email Address</th>
                <th>Work Type</th>
                <th>Next Step</th>
                <th></th>
            </tr>
        </thead>
    </table>
</div>

So does anyone know how I can achieve this? The error i get says
"DataTables warning: table id=DT_load - Requested unknown parameter '3' for row 0, column 3. For more information about this error, please see http://datatables.net/tn/4"

kthorngren

Datatables doesn't support what you are trying to do. If you want multiple rows in a cell you will need to use one columns.render function and build an HTML string that represents the row you want.

Something like this:

                    {
                        "data": null,
                        "width": "15%"
                        "render": function (data, type row) {
                            var html = [];
                            if (row.bookkeeping) {
                                html.push("Bookkeeping");
                            }
                            if (row.personal_Income_Taxation) {
                                html.push("Personal Income Taxation");
                            }
                            if (...) {
                              // continue with all options
                            }
                            return html.join('<br>');
                        },
                    },

I didn't try the above but it should be close enough to get you started.

Kevin

aditya_28

@kthorngren , Thank you, this was really helpful. Just curious though, how does the row object have those properties like "bookkeeping" and such, and how does "bookkeeping" have the correct values when we set data to null?

kthorngren

how does the row object have those properties like "bookkeeping" and such

Take a look at the columns.render docs. There are 4 parameters you can use for the function. The row parameters contains the data for the row.

how does "bookkeeping" have the correct values when we set data to null?

You are referring to this "data": null,? The columns.data docs explain its usage in different configurations. I'm using as a placeholder to allow for access to the row data.

Kevin