jQuery DataTable插件最后分页按钮后出现省略号，设置sPaginationType仍无效

Hey there! I see you're stuck with that persistent ellipsis showing up after the last pagination button even after setting sPaginationType: "full_numbers". Let's break down why this happens and how to fix it.

Why the Ellipsis Appears #

DataTables inserts ellipses (…) in pagination controls automatically when there are too many pages to display comfortably—this prevents the pagination bar from overflowing or looking cluttered. The full_numbers pagination type still uses this behavior by default, which is why you're seeing the ellipsis despite your setting.

Solutions to Remove the Ellipsis #

1. Quick Fix: Hide Ellipsis with CSS

If you just want to hide the ellipsis without altering pagination logic, add this CSS rule to your stylesheet:

.dataTables_paginate .ellipsis {
    display: none !important;
}

This targets the ellipsis element in the pagination container and hides it entirely. Just ensure your pagination container has enough width to fit all page buttons if you’re displaying a large number of pages.

2. Dynamic Removal with Draw Callback

For a more robust solution that triggers every time the table redraws (like after sorting or filtering), use the drawCallback function to remove ellipsis elements on the fly:

table = $("#gridTable").DataTable({ 
    "pageLength": tableInfo.length, 
    "displayStart": tableInfo.start, 
    "processing": true, 
    "searching": false, 
    "serverSide": true, 
    "pagingType": "full_numbers", // Note: In DataTables 1.10+, use `pagingType` instead of the old `sPaginationType`
    "order": tableInfo.order, 
    "dom": '<"top">rt<"grid-bottom clearfix"lip>', 
    "language": { 
        "lengthMenu": "Page Size &nbsp; _MENU_ ", 
        "info": "Records _START_ to _END_ of _TOTAL_" // Pro tip: Add `_TOTAL_` here to show full record count!
    },
    "drawCallback": function(settings) {
        // Remove all ellipsis elements from pagination after each table redraw
        $('.dataTables_paginate .ellipsis').remove();
    }
});

I also updated the language.info string to include _TOTAL_ so users can see the full number of records—this is a common quality-of-life improvement, but feel free to keep your original text if you prefer.

3. Force All Page Numbers to Display (Advanced)

If you want to show every single page number instead of hiding any (not recommended for large datasets, as it can break layout), you can create a custom pagination type without ellipses:

// Register a custom pagination type that shows all page numbers
$.fn.dataTableExt.oPagination.full_numbers_no_ellipses = {
    "fnInit": function(oSettings, nPaging, fnDraw) {
        var nFirst = document.createElement('span'),
            nPrevious = document.createElement('span'),
            nNext = document.createElement('span'),
            nLast = document.createElement('span'),
            nPageContainer = document.createElement('span'),
            nPaginate = document.createElement('div');

        // Set classes and labels for navigation buttons
        nFirst.className = "paginate_button first";
        nPrevious.className = "paginate_button previous";
        nNext.className = "paginate_button next";
        nLast.className = "paginate_button last";

        nFirst.innerHTML = oSettings.oLanguage.oPaginate.sFirst;
        nPrevious.innerHTML = oSettings.oLanguage.oPaginate.sPrevious;
        nNext.innerHTML = oSettings.oLanguage.oPaginate.sNext;
        nLast.innerHTML = oSettings.oLanguage.oPaginate.sLast;

        // Assemble pagination container
        nPaginate.appendChild(nFirst);
        nPaginate.appendChild(nPrevious);
        nPaginate.appendChild(nPageContainer);
        nPaginate.appendChild(nNext);
        nPaginate.appendChild(nLast);
        nPaging.appendChild(nPaginate);

        // Add click handlers for navigation buttons
        $(nFirst).click(() => { oSettings.oApi._fnPageChange(oSettings, "first"); fnDraw(oSettings); });
        $(nPrevious).click(() => { oSettings.oApi._fnPageChange(oSettings, "previous"); fnDraw(oSettings); });
        $(nNext).click(() => { oSettings.oApi._fnPageChange(oSettings, "next"); fnDraw(oSettings); });
        $(nLast).click(() => { oSettings.oApi._fnPageChange(oSettings, "last"); fnDraw(oSettings); });

        // Disable buttons if on first/last page
        this._updateButtonStates(oSettings);
    },
    "fnUpdate": function(oSettings, fnDraw) {
        var iTotalPages = Math.ceil(oSettings.fnRecordsDisplay() / oSettings._iDisplayLength),
            iCurrentPage = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1,
            nPageContainer = $(oSettings.nTableWrapper).find('.paginate_button').parent().find('span')[2],
            pageButtonsHtml = "";

        // Generate HTML for all page numbers
        for (let i = 1; i <= iTotalPages; i++) {
            pageButtonsHtml += `<span class="paginate_button${i === iCurrentPage ? ' current' : ''}">${i}</span>`;
        }
        $(nPageContainer).html(pageButtonsHtml);

        // Add click handlers for page number buttons
        $(nPageContainer).find('span').click(function() {
            oSettings.oApi._fnPageChange(oSettings, parseInt($(this).text(), 10) - 1);
            fnDraw(oSettings);
        });

        // Update button states (enabled/disabled)
        this._updateButtonStates(oSettings);
    },
    "_updateButtonStates": function(oSettings) {
        const $wrapper = $(oSettings.nTableWrapper);
        const isFirstPage = oSettings._iDisplayStart === 0;
        const isLastPage = oSettings._iDisplayStart + oSettings._iDisplayLength >= oSettings.fnRecordsDisplay();

        $wrapper.find('.paginate_button.first, .paginate_button.previous').toggleClass('disabled', isFirstPage);
        $wrapper.find('.paginate_button.next, .paginate_button.last').toggleClass('disabled', isLastPage);
    }
};

// Use the custom pagination type in your DataTable config
table = $("#gridTable").DataTable({ 
    // ... your existing config ...
    "pagingType": "full_numbers_no_ellipses"
});

This creates a custom full_numbers_no_ellipses pagination type that renders every page number without any ellipses. Just be cautious with this if you have hundreds of pages—it can make the pagination bar too wide for small screens!

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