DataTable分页失效及自定义属性字符串被截断问题求助

Hey there! Let's tackle your two issues one by one with clear fixes and explanations:

1. Fixing DataTable Pagination Not Working #

What's causing the problem: #

• Using async: false creates a synchronous Ajax request, which blocks browser rendering and can prevent DataTable from correctly calculating row counts needed for pagination.
• Your init_datatable function has an incomplete ordering configuration ('ordering' :...), which can silently break DataTable initialization even without console errors.
• Manual DOM manipulation (clearing/appending rows) combined with synchronous requests might trigger DataTable initialization before the DOM is fully updated.

The Fix: #

First, remove the synchronous request (async: false is bad practice for UI responsiveness), then complete your DataTable configuration:

Updated Ajax Code:

$('.bicam_tests').click(function(){ 
  $.ajax({ 
    type: 'GET', 
    url: 'http://10.1.1.150/humanresource/testsql.php?user_id=&user_id=&option=total_quizes_json', 
    dataType: 'json', 
    contentType: 'application/json; charset=UTF-8', 
    success: function (response) { 
      $("#id_bicam_datatable tbody").html(""); 
      $.each(response, function(i, item) { 
        // We'll fix the attribute issue here too
        $("#id_bicam_datatable tbody").append('<tr><td>'+ item.id +'</td><td>'+ item.course +'</td><td>'+ item.name +'</td><td>'+'<input class="form-check-input" name="bicam_check" type="checkbox" fid="' + item.id + '" fcourse="' + item.course + '" fname="' + item.name + '"></td></tr>'); 
      }); 
      init_datatable("#id_bicam_datatable"); 
    }, 
    error: function(data){ 
      alert("Response error"); 
    } 
  }); 
});

Completed init_datatable Function:

function init_datatable(element, option){ 
  var targetElement = element || ".datatable"; 
  var option_sorting = [[0,'asc']]; 
  if(option == "no-order"){ 
    option_sorting = []; 
  } 
  $(targetElement).DataTable({ 
    'lengthChange': true, 
    'searching' : true, 
    'destroy' : true, 
    'ordering' : true, // Complete this configuration
    'paging': true, // Explicitly enable pagination
    'pageLength': 10, // Set default rows per page (adjust as needed)
    'order': option_sorting 
  }); 
}

2. Fixing Truncated Custom Attributes (fid, fcourse, fname) #

What's causing the problem: #

You didn't wrap your custom attribute values in quotes! If item.id, item.course, or item.name contain spaces or special characters (like &, =), HTML will interpret the space as the end of the attribute value and treat the rest as a new attribute. For example, fid=123 abc becomes fid="123" abc="" in the DOM.

The Fix: #

Wrap all custom attribute values in double quotes. For better compliance with HTML standards, use data-* attributes instead of custom attribute names:

Updated Row Append Code:

// Using standard data-* attributes (recommended)
$("#id_bicam_datatable tbody").append('<tr><td>'+ item.id +'</td><td>'+ item.course +'</td><td>'+ item.name +'</td><td>'+'<input class="form-check-input" name="bicam_check" type="checkbox" data-fid="' + item.id + '" data-fcourse="' + item.course + '" data-fname="' + item.name + '"></td></tr>');

To access these values later, use jQuery's data() method:

// Example: Get values when checkbox is clicked
$('.bicam_check').click(function() {
  const fid = $(this).data('fid');
  const course = $(this).data('fcourse');
  const name = $(this).data('fname');
  // Use the values as needed
});

Quick Recap: #

• Remove synchronous Ajax requests and complete your DataTable configuration to restore pagination.
• Wrap custom attribute values in quotes, and use data-* attributes for standard-compliant custom data storage.

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