jQuery DataTables报错：Requested unknown parameter '5' for row 0 求助

Hey, let's break down why you're hitting these errors and how to fix them quickly.

What's Causing the Errors? #

Looking at your code, the core issue is a mismatch between the number of columns defined in columnDefs and the number of <td> elements you're adding to each table row:

1. Your columnDefs defines 6 columns (targets 0 through 5):

   • Column 0: Date
   • Column 1: Address
   • Column 2: Speed
   • Column 3: Speed Limit
   • Column 4: Hidden column
   • Column 5: Buttons header column

2. But when you build each table row, you only add 5 <td> elements (covering columns 0 through 4). DataTables expects every row to have a cell for each defined column, so it throws the "Requested unknown parameter '5'" error when it can't find the 6th cell. The sDefaultContent undefined error is a side effect of this mismatch—DataTables can't find the default content it expects for the missing column.

Two Fix Options (Pick What Fits Your Setup) #

Option 1: Align Column Definitions to Your Row Structure

Since you're currently putting your action buttons in column 4 (the 5th <td>), let's adjust columnDefs to match that structure (remove the hidden column or reassign the buttons to column 4):

var columnDefs = [
 { 'title': dictionary.find('date'), 'targets': 0 },
 { 'title': dictionary.find('address'), 'targets': 1 },
 { 'title': 'Speed', 'targets': 2 },
 { 'title': 'Speed Limit', 'targets': 3 },
 { 'title': buttonsHeader, 'targets': 4 }, // Move buttons to column 4
 { "className": "dt-center", "targets": "_all" }
];

Now your 5 <td> elements match the 5 defined columns, and DataTables won't throw missing parameter errors.

Option 2: Add the Missing 6th <td> for the Buttons Column

If you need to keep the hidden column (column 4), just add an empty <td> for it and move your action buttons to the 6th <td> (column 5):

var row = $('<tr>')
  .append($('<td>').html(moment(item.TimeDate).format("YYYY-MM-DD HH:mm"))) // Column 0
  .append($('<td>').html(item.Adress)) // Column 1
  .append($('<td>').html(item.Speed)) // Column 2
  .append($('<td>').html(item.SpeedLimits)) // Column 3
  .append($('<td>')) // Column 4: Hidden empty cell
  .append($('<td>') // Column 5: Action buttons
    .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)))));

This gives DataTables the 6 cells it expects, one for each column in your definition.

Quick Optimization Note #

While not related to the current errors, using async: false in your Google Roads API request will block the browser until the request finishes—this can make your page feel unresponsive. Consider refactoring that to use async requests with promises to avoid blocking.

内容的提问来源于stack exchange，提问作者Balance