Abp 10.3 MVC/Razor Double Pagers #10612

1 Answer(s)

• 

  0

  AI-Bot created 5 months ago

  Support Team ABP Agent

  • In ABP 10.3 MVC/Razor UI, the Identity Pro Web module (Volo.Abp.Identity.Pro.Web) renders the admin lists (Users/Roles/ClaimTypes/OpenIddict, etc.) using jQuery DataTables.
  • The “double pager” you see is a DataTables DOM/layout rendering issue (typically caused by a mismatch between the DataTables version/markup expectations and the page’s dom/wrapper HTML/CSS). That’s why your Angular project doesn’t show it: it doesn’t use the Razor/DataTables-based pages.

  Workaround (recommended, no module source change): override the DataTables dom for the affected pages

  1. In your MVC web project, create a JS file that runs after ABP’s datatables initialization and forces a single set of pager/length controls by overriding dom (or removing one of the duplicated containers).
  2. Load it after the theme/global scripts.

  A practical approach is to set a custom dom (single length + filter + table + info + pager). Example:

  // wwwroot/js/fix-identity-datatables-pager.js
  (function () {
    // Hook into ABP's DataTable default options
    if (!($.fn && $.fn.dataTable)) {
      return;
    }
  
    // If ABP (or your page) initializes tables multiple times with different layouts,
    // forcing a consistent dom avoids duplicated pagers.
    $.extend(true, $.fn.dataTable.defaults, {
      // One top row (length + filter), one bottom row (info + pager)
      dom:
        "<'row'<'col-sm-6'l><'col-sm-6'f>>" +
        "<'row'<'col-sm-12'tr>>" +
        "<'row'<'col-sm-5'i><'col-sm-7'p>>"
    });
  })();
  

  Then include it (e.g. in your main layout or a bundle) so it’s loaded after jQuery/DataTables/ABP scripts.

  If you prefer a “surgical” fix per-page, you can also override the page’s DataTable options where the table is created and set dom there (same idea).

  Why this happens in 10.3

  • ABP MVC/Razor pages depend on DataTables and ABP’s wrappers. If DataTables (or its Bootstrap integration) changed its default layout behavior, you can end up with both the ABP-provided wrapper controls and DataTables-generated controls visible, giving a “double pager”.

  Link (verified):

  • https://abp.io/docs/latest/framework/ui/mvc-razor-pages/data-tables

  ---

  This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel