如何自定义jQuery DataTables分页按钮，将分页信息嵌入其中？

Got it, let's sort out this custom pagination styling for your DataTables. The issue with your initial dom config is that it just places the info and pagination elements side by side, but we need to embed the page info directly inside the pagination control to get that <<< Action 1 of 3 >>> look. Here's how to do it step by step:

Step 1: Adjust the dom Configuration #

First, we don't need the separate info element (i) anymore since we'll integrate that into the pagination. Update your dom setting to focus on the pagination container:

$("#your-table-id").DataTable({
  dom: '<"#df"><"pull-right"p>>',
  // Keep your existing configs (columns, data, etc.) here
});

Step 2: Use drawCallback to Rewrite Pagination Content #

DataTables provides the drawCallback function that runs every time the table redraws (like when navigating pages). We'll use this to inject our custom pagination text and restructure the controls:

$("#your-table-id").DataTable({
  dom: '<"#df"><"pull-right"p>>',
  drawCallback: function() {
    const api = this.api();
    const pageInfo = api.page.info();
    const currentPage = pageInfo.page + 1; // DataTables uses 0-indexed pages, so we adjust to 1-index
    const totalPages = pageInfo.pages;
    
    // Build our custom pagination text
    const customText = `<<< Action ${currentPage} of ${totalPages} >>>`;
    
    // Grab the pagination container from the table wrapper
    const paginateContainer = $(this).closest(".dataTables_wrapper").find(".dataTables_paginate");
    
    // Save the original pagination buttons (prev/next/page numbers)
    const originalButtons = paginateContainer.html();
    
    // Rewrite the pagination container to merge our text with the buttons
    paginateContainer.html(`<div class="custom-pagination-group">${customText} ${originalButtons}</div>`);
  }
});

Step 3: Add CSS to Style It Properly #

To make the elements align neatly and look like a unified control, add this CSS:

.custom-pagination-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dataTables_paginate .paginate_button {
  padding: 4px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
}

.dataTables_paginate .paginate_button.current {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}

.dataTables_paginate .paginate_button:hover:not(.current) {
  background-color: #f0f0f0;
}

How This Works #

• The drawCallback triggers on every table redraw, so it automatically updates the page info whenever the user navigates to a new page.
• We pull the current page (adjusted to 1-index for user-friendliness) and total pages from DataTables' built-in page info object.
• We restructure the pagination container to merge our custom text with the original pagination buttons, then use CSS to make everything look cohesive.

If you want the <<< and >>> to act as clickable previous/next buttons instead of static text, just modify the code to turn them into elements that trigger api.page('previous').draw() and api.page('next').draw() respectively. Let me know if you need that tweak!

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