Requested unknown parameter '5' for row 0 (jquery datatables)

Question

I using datatables in my View

Here is View code

<table id="tableSpeedLimits"  class="table table-striped cell-border">
    <thead>

    </thead>
    <tbody id="speeddata" class="text-center"></tbody>
</table>

Here is column defs that I define in my js

    var buttonsHeader = '<div class="ss-button-header"><span class="glyphicon glyphicon-edit"/><span class="glyphicon glyphicon-map-marker"/><span class="glyphicon glyphicon-record"/></div>'
var columnDefs = [
    { 'title': dictionary.find('date'), 'targets': 0 },
    { 'title': dictionary.find('address'), 'targets': 1 },
    { 'title': 'Speed', 'targets': 2 },
    { 'title': 'Speed Limit', 'targets': 3 },
    { 'title': 'hidden', 'targets': 4 },
    { 'title': buttonsHeader, 'targets': 5 },
    { 'targets': [4], 'visible': false },
    //{ 'targets': [0, 10], 'searchable': false },
    //{ 'targets': [0, 2, 3, 4, 5, 6, 7, 8, 9, 10], 'sortable': false },
    /*{
        'targets': 1, render: function (data, type, row) {
            if (type === 'display' || type === 'filter') {
                return moment(data).format('HH:mm:ss');
            }
            return data;
        }
    },*/
   //{ 'className': 'text-right', 'targets': [3] },
   //{ 'className': 'text-left', 'targets': [4] },
    { "className": "dt-center", "targets": "_all" }
];

Here is function in what I make calls and that populate table

function PopulateTableStartStop(event, ui) {
var imei = $('#selectVehicles').val();

$('.ajax-loader').show();

var start = $('#startDate').val();
var stop = $('#endDate').val();
//Getting data from back-end
var dburl = "/Reports/SpeedData";
var path = 'path= ';
var model = {
    start: moment(start, "DD/MM/YYYY").format("YYYY-MM-DD"),
    stop: moment(stop, "DD/MM/YYYY").format("YYYY-MM-DD"),
    imei: parseInt($('#selectVehicles').val())
};

var table = $('#tableSpeedLimits').DataTable();
//Getting data from db, pass it to google api and populate to table
 $.ajax({
    url: '/Reports/SpeedData',
    type: 'GET',
    data: {
        'imei': imei,
        'start': moment(start, "DD/MM/YYYY").format("YYYY-MM-DD"),
        'stop':  moment(stop, "DD/MM/YYYY").format("YYYY-MM-DD"),
        'internetExploderWorkaround': Date.now()
    },
    success: function (data) {
        if (data.redirectUrl != undefined) {
            window.location.href = data.redirectUrl;
        }

        if (data.error != undefined) {
            alert(data.error);
        }
        else {

            table.clear();
            var editText = dictionary.find('edit');
            var mapText = dictionary.find('map');
            var addPlaceText = dictionary.find('addPlace');
            var addText = dictionary.find('add');
            var deleteText = dictionary.find('delete');
            var actionsText = dictionary.find('actions');

            var dropdownButton = $('<button>').addClass('btn btn-xs btn-default dropdown-toggle').attr('data-toggle', 'dropdown').html(actionsText + ' <span class="caret"></span>');
            var editHtml = String.format('<a href="javascript:void(0)"><span class="glyphicon glyphicon-edit" title="{0}"></span> {0}</a>', editText);
            var mapHtml = String.format('<a href="javascript:void(0)"><span class="glyphicon glyphicon-map-marker" title="{0}"></span> {0}</a>', mapText);
            var addPlaceHtml = String.format('<a href="javascript:void(0)"><span class="glyphicon glyphicon-record" title="{0}"></span> {0}</a>', addPlaceText);
            var addBadgeEventHtml = String.format('<a href="javascript:void(0)"><span class="glyphicon glyphicon-plus" title="{0}"></span> {0}</a>', addText);
            var deleteBadgeEventHtml = String.format('<a href="javascript:void(0)"><span class="glyphicon glyphicon-remove-circle" title="{0}"></span> {0}</a>', deleteText);

            speeddata = data;
            for (var i = 0; i < speeddata.length; i++) {
                path = "path=" + speeddata[i].Latitude2 + ',' + speeddata[i].Longitude2;
                var googleurl = "https://roads.googleapis.com/v1/speedLimits?"
                    + path + "&key=" + roadsapikey;
                $.ajax({
                    url: googleurl,
                    dataType: 'json',
                    async: false,
                    type: 'GET',
                    success: function (data) {

                        for (var i = 0; i < data.speedLimits.length; i++) {
                            speedobject.push({
                                SpeedLimits: data.speedLimits[i].speedLimit
                            });
                            speeddata.forEach((item, index) => Object.assign(item, speedobject[index]));

                        }


                    }

                });
            }

            $.each(speeddata, function (index, item) {

                var row = $('<tr>')
                    .append($('<td>').html(moment(item.TimeDate).format("YYYY-MM-DD HH:mm")))
                    .append($('<td>').html(item.Adress))
                    .append($('<td>').html(item.Speed))
                    .append($('<td>').html(item.SpeedLimits))
                    .append($('<td>')
                        .append($('<div>').addClass('dropdown').append(dropdownButton.clone())
                            .append($('<ul>').addClass('dropdown-menu dropdown-menu-right')
                                .append($('<li>').prop('id', 'edit_' + item.LogID).addClass('editLogging').html(editHtml))
                                .append($('<li>').prop('id', 'map_' + item.LogID).addClass('showMap').html(mapHtml))
                                .append($('<li>').prop('id', 'place_' + item.LogID).addClass('addPlace').html(addPlaceHtml)))));
                //startStops.push(item);
                table.row.add(row);


            });



            //totals = data.totals;

            table.draw();


            $('.ajax-loader').hide();
        }
    },
    error: function () {
        $('.ajax-loader').hide();
        alert(dictionary.find('ajaxErrorNoConnection'));
    }
})
}

It return data and show it in datatable, but I get this error

DataTables warning: table id=tableSpeedLimits - Requested unknown parameter '5' for row 0.

And in console I got this

Uncaught TypeError: Cannot read property 'sDefaultContent' of undefined

Where is can be my problem?

Answer 1

I think, that you should check function String.format(), it use in your code. The native JS haven't this function, but may be you have your own implementation. Something like String.prototype.format = function(){ la-la-la };