Create ul in one cell with several li items

jchooker

I am attempting to create rows with a custom date in column one and a ul with line-by-line case logs (often >1 list item), and the least flawed approach I have found is below. Yet I still receive several errors of the type: "DataTables warning: table id=troubleshoot-log - Requested unknown parameter '1' for row 0, column 1 ... http://datatables.net/tn/4"

The debugger finds no issues with the code.

$(document).ready(function () {
    $('#device-picker').select2({
        placeholder: "Select an asset",
    });
    initializeDataTable($('#troubleshoot-log'));
    $('#new-issue-log-btn').on('click', function () {
        var t = $('#troubleshoot-log').DataTable();
        fillIssueLogRow(t);
    });
});

function initializeDataTable(rootTable) {
    var initDate = new Date('November 3, 2017 00:30:00');
    var _initDate = String(initDate.getMonth() + 1).padStart(2, '0') + '/' + String(initDate.getDay() - 2).padStart(2, '0') + '/' +
        String(initDate.getFullYear()) + ' ( ' + String(initDate.getHours()).padStart(2, '0') +
        ':' + String(initDate.getMinutes()).padStart(2, '0') + ':' + String(initDate.getSeconds()).padStart(2, '0') + ' )';
    var initLogDate1 = new Date('November 3, 2017 00:30:00');
    var _initLogDate1 = String(initLogDate1.getMonth() + 1).padStart(2, '0') + '/' + String(initLogDate1.getDay() - 2).padStart(2, 
'0') + '/' +
        String(initLogDate1.getFullYear()) + ' ( ' + String(initLogDate1.getHours()).padStart(2, '0') + ':' +
        String(initLogDate1.getMinutes()).padStart(2, '0') + ':' + String(initLogDate1.getSeconds()).padStart(2, '0') + ' )';
    var initLogDate2 = new Date('November 4, 2017 06:30:00');
    var _initLogDate2 = String(initLogDate2.getMonth() + 1).padStart(2, '0') + '/' + String(initLogDate2.getDay() - 2).padStart(2, '0') + '/' +
        String(initLogDate2.getFullYear()) + ' ( ' + String(initLogDate2.getHours()).padStart(2, '0') + ':' +
        String(initLogDate2.getMinutes()).padStart(2, '0') + ':' + String(initLogDate2.getSeconds()).padStart(2, '0') + ' )';
    var initLogDateStr1 = _initLogDate1 + ' - Could not log in to laptop with PIV card';
    var initLogDateStr2 = _initLogDate2 + ' - Connected with ITSC and they installed new drivers [resolved]';
    var initLog = [[_initDate]];
    rootTable.DataTable({
        data: initLog,
        columns: [
            {
                title: "Ticket Date"
            },
            {
                title: "Troubleshooting Log"
            },
        ],
        createdRow: function (row, data, rowIndex) {
            $.each($('td', row), function (colIndex) {
                if (colIndex > 0) {
                    $(this).append('<ul><li>' + initLogDateStr1 + '</li>' + '<li>' + initLogDateStr2 + '</li></ul>');
                }
            });
        },
    });
}

Thanks

kthorngren

That error indicates the data you are adding using data: initLog, doesn't have an element for the second column. If you don't have anything for the column you can use columns.defaultContent and maybe columns.data set to null, something like this:

        columns: [
            {
                title: "Ticket Date"
            },
            {
                data: null,
                defaultContent: '',
                title: "Troubleshooting Log"
            },
        ],

If this doesn't help then we will need to see a sample of your data. You can post here or create a simple test case showing the problem.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

jchooker

Simple as. One thousand blessings upon you, Kevin. Do you consider the "createdRow" approach I'm using here to be efficient enough, when one is adding li elements to a growing ul within one particular cell?

jchooker

Typo from OP: For every row, column 0 is just the date+time, column 1 is the date+time & the logged event in every li

kthorngren

Looping through the td elements is probably not efficient. See this example for targeting specific column data and row td.

I would probably use columns.render instead. See this example.

Either way should be fine though.

Kevin

jchooker

Curious... how would one use render within a column definition where we've already set data to null? Growing the array that you're feeding data at initialization to include extra indices which can then all be added within the same ul in the cell? And then feeding the columns.data something other than null?

kthorngren

The columns.render docs describe all of the parameters provided. The row (third) parameter contains the full set of data for the row. Are you looking for data in the row?

Based on your example above you could simply do this:

data: null,
render: function ( data, type, row, meta ) {
  return '<ul><li>' + initLogDateStr1 + '</li>' + '<li>' + initLogDateStr2 + '</li></ul>';
}

Sorry I don't understand your questions:

Growing the array that you're feeding data at initialization to include extra indices which can then all be added within the same ul in the cell?

What array are you referring to?

And then feeding the columns.data something other than null?

columns.data can point to a specific property within the object or set to null if the column is purely for rendering.

Kevin

jchooker

Ah I see what you meant. Those additional questions are moot now. Thanks