Angular5项目中集成jQuery分页插件的技术问题求助

Hey there! Let's get that paginathing pagination up and running in your Angular 5 project—you've already made a solid start with the setup, so let's fill in the gaps and fix any potential snags.

Step 1: Fix Script Loading Order Critical! #

First, I noticed you haven't added jQuery to your angular-cli.json scripts array yet. Since paginathing depends entirely on jQuery, it needs to load before the pagination script. Update your scripts section like this:

"scripts": [
  "../node_modules/jquery/dist/jquery.min.js", // Add jQuery first—this is mandatory!
  "../src/assets/script/custom.js",
  "../src/assets/script/paginathing.js"
],

Step 2: Update Typings for Global Variables #

In your typings.d.ts, make sure you include jQuery's global variable too—this prevents TypeScript from throwing "undefined" errors when you use $:

declare var $: any;
declare var customs: any;
declare var paginathing: any;

Step 3: Complete the Component Implementation #

Here's how to finish your app.component.ts to initialize the pagination once the DOM is fully ready. We'll use ngOnInit (since the DOM is rendered at this point) instead of the constructor:

import { Component, OnInit } from '@angular/core';
// Optional: If global jQuery isn't working, uncomment this line to import it directly
// import * as $ from 'jquery';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    // Wait for the DOM to be fully loaded before setting up pagination
    $(document).ready(() => {
      // Target your list element—replace .item-list with your actual selector
      $('.item-list').paginathing({
        perPage: 5,          // Number of items to display per page
        limitPagination: 5,  // Number of page buttons to show
        containerClass: 'pagination', // Custom class for styling
        pageNumbers: true,   // Show numeric page buttons
        firstText: '« First',
        lastText: 'Last »',
        prevText: '‹ Prev',
        nextText: 'Next ›',
        // Optional callback for when the page changes
        onPageChange: (page) => {
          console.log(`Switched to page ${page}`);
        }
      });
    });
  }
}

Step 4: Set Up Your Template HTML #

Make sure your template has a structured list that paginathing can target. For example:

<!-- Your list of items -->
<div class="item-list">
  <div class="list-item">Item 1</div>
  <div class="list-item">Item 2</div>
  <div class="list-item">Item 3</div>
  <div class="list-item">Item 4</div>
  <div class="list-item">Item 5</div>
  <div class="list-item">Item 6</div>
  <div class="list-item">Item 7</div>
  <!-- Add more items as needed -->
</div>

<!-- Paginathing will automatically insert pagination buttons right here -->

Troubleshooting Common Issues #

• $ is not defined error: Double-check that jQuery is loaded first in your angular-cli.json scripts. If that doesn't work, import jQuery directly in your component with import * as $ from 'jquery'.
• Pagination doesn't render: Ensure your list selector matches exactly what's in your template. Also, never initialize pagination in the constructor—it runs before the DOM is ready, so the script won't find your elements.
• Styling problems: Paginathing adds basic CSS classes, but you can customize options like containerClass, activeClass, and disabledClass to match your app's design (e.g., use Bootstrap pagination classes for a polished look).

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