pagination in bing

Does Bing have requirements or recommendations for pagination design? For example, like Google had "next / pref"

typescript – subscribe to the data content for a datasource angular material table , how to make the pagination server calls from angular

introducir la descripción de la imagen aquí

Hi, I’m block with 2 points and need some of help with my development first it’s how to get data from backend with the pagination server procedure, i see multiple examples but nothing with the backend results of the httpclient get call.

The api to use data works with this:

http://localhost:8080/users?size=10&page=100

1.- I get the values but i don’t know really how to implements the HttpParams to get the values with the angular material table paginator.

My other problem its the object its a container but i can’t access into the content of the data to retrieve the values of users.

{
  "content": ({
        "id": 343,
        "name": "name1",
        "email": "a.dasgeasslo@asdf.com",
        "imageUrl": null,
        "emailVerified": true,
        "sapUserId": "adangesslo",
        "provider": "google",
        "providerId": null,
        "createdBy": "Admin",
        "updatedBy": "Admin",
        "createDate": "2020-05-05T12:15:42.744+0000",
        "updateDate": "2020-05-05T12:15:42.744+0000",
        "lastLoginDate": null,
        "roles": ({
          "id": 9,
          "name": "site_prod_shift",
          "type": "site_prod_shift",
          "description": "site_prod_shift",
          "createdBy": "Admin",
          "updatedBy": "Admin",
          "createDate": "2020-05-04T18:37:58.302+0000",
          "updateDate": "2020-05-04T18:37:58.302+0000"
        }),
        "plants": ({
          "plantId": 4,
          "name": "asdf (asdf e asdf)",
          "code": "MG",
          "smartsheetLink": "",
          "type": {
            "id": 1,
            "name": "asf Plant"
          },
          "createDate": "2020-05-04T18:02:15.333+0000",
          "updateDate": "2020-05-04T18:02:15.333+0000",
          "createdBy": "Admin",
          "updatedBy": "Admin",
          "opcoId": 1
        })
      },




  ),
  "pageable": {
    "sort": {
      "unsorted": true,
      "sorted": false,
      "empty": true
    },
    "offset": 0,
    "pageNumber": 0,
    "pageSize": 20,
    "unpaged": false,
    "paged": true
  },
  "totalPages": 104,
  "totalElements": 2065,
  "last": false,
  "size": 20,
  "number": 0,
  "sort": {
    "unsorted": true,
    "sorted": false,
    "empty": true
  },
  "numberOfElements": 20,
  "first": true,
  "empty": false
}


My user.service:

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { User } from '../model/user';
import { HttpClient, HttpErrorResponse, HttpParams } from '@angular/common/http';
import { environment } from './../../environments/environment.prod';
import { ToasterService } from 'angular2-toaster';
import { AddDialogComponent } from '../main/users/dialogs/add/add.dialog.component';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class UserService {

  dataChange: BehaviorSubject<User()> = new BehaviorSubject<User()>(());
  // Temporarily stores data from dialogs
  dialogData: any;
  apiurl = environment.apiUrl;
  items: any;
  AddDialogComponent: AddDialogComponent;
  AllDataObj: any;
  AllData_Arr: string;

  constructor(private httpClient: HttpClient) { }

  get data(): User() {
    return this.dataChange.value;
  }

  getDialogData() {
    return this.dialogData;
  }

  /** CRUD METHODS http://localhost:8080/users?size=1&page=1  */

  getAllUsers(): void {
    this.httpClient.get<User()>(this.apiurl + "/users?",
      {
        params: new HttpParams()
          .set('size', "5")
          .set('page', "5")
        //}).subscribe((data: User()) => {
        }).subscribe(data => {
        this.dataChange.next(data);
        console.log(this.data);
      },
        (error: HttpErrorResponse) => {
          console.log(error.name + ' ' + error.message);
        });
  }
  // getAllUsers(): void{
  //   this.httpClient.get<User()>(this.apiurl+"https://es.stackoverflow.com/users").subscribe((data: User())=> {
  //     console.log(data);
  //     this.dataChange.next(data);
  //     //this.AllDataObj = data;
  //     //this.AllData_Arr= JSON.stringify(this.AllDataObj);
  //     //console.log(this.AllData_Arr);
  //     },
  //     (error: HttpErrorResponse) => {
  //     console.log (error.name + ' ' + error.message);
  //     });
  // }

  // DEMO ONLY, you can find working methods below
  addUser(user: User): void {
    this.httpClient.post(this.apiurl + "/createuser", user).subscribe(data => {
      this.dialogData = user;
      // this.toasterService.pop('Successfully added');
    },
      (err: HttpErrorResponse) => {
        console.log(err.name + ' ' + err.message)
        //this.ToasterService.pop('Error occurred. Details: ' + err.name + ' ' + err.message);
      });
  }

  updateUser(user: User): void {
    this.dialogData = user;
  }

  deleteUser(id: number): void {
    console.log(id);
  }

  getConfig(): Observable<User()> {
    return this.httpClient.get<User()>(this.apiurl + "https://es.stackoverflow.com/users");
  }

}



/* REAL LIFE CRUD Methods I've used in my projects. ToasterService uses Material Toasts for displaying messages:

    // ADD, POST METHOD
    addItem(kanbanItem: KanbanItem): void {
    this.httpClient.post(this.apiurl, kanbanItem).subscribe(data => {
      this.dialogData = kanbanItem;
      this.toasterService.showToaster('Successfully added', 3000);
      },
      (err: HttpErrorResponse) => {
      this.toasterService.showToaster('Error occurred. Details: ' + err.name + ' ' + err.message, 8000);
    });
   }

    // UPDATE, PUT METHOD
     updateItem(kanbanItem: KanbanItem): void {
    this.httpClient.put(this.apiurl + kanbanItem.id, kanbanItem).subscribe(data => {
        this.dialogData = kanbanItem;
        this.toasterService.showToaster('Successfully edited', 3000);
      },
      (err: HttpErrorResponse) => {
        this.toasterService.showToaster('Error occurred. Details: ' + err.name + ' ' + err.message, 8000);
      }
    );
  }

  // DELETE METHOD
  deleteItem(id: number): void {
    this.httpClient.delete(this.apiurl + id).subscribe(data => {
      console.log(data(''));
        this.toasterService.showToaster('Successfully deleted', 3000);
      },
      (err: HttpErrorResponse) => {
        this.toasterService.showToaster('Error occurred. Details: ' + err.name + ' ' + err.message, 8000);
      }
    );
  }
*/

my user.component.ts

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { UserService } from '../../services/user.service';
import { HttpClient } from '@angular/common/http';
import { MatDialog } from '@angular/material/dialog';
import { MatPaginator, PageEvent } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { User } from '../../model/User';
import { DataSource } from '@angular/cdk/collections';
import {AddDialogComponent} from './dialogs/add/add.dialog.component';
import {EditDialogComponent} from './dialogs/edit/edit.dialog.component';
import {DeleteDialogComponent} from './dialogs/delete/delete.dialog.component';
import {BehaviorSubject, fromEvent, merge, Observable} from 'rxjs';
import {map} from 'rxjs/operators';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ('./users.component.scss')
})
export class UsersComponent implements OnInit {
  displayedColumns = ('id', 'Name', 'email', /*'imageUrl',*/ 'createdate', 'sapUserId', 'roles', 'actions');
  exampleDatabase: UserService | null;
  dataSource: ExampleDataSource | null;
  index: number;
  id: number;
  newid: number;

  constructor(
    public httpClient: HttpClient,
    public dialog: MatDialog, 
    public userService: UserService) {}

  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
  @ViewChild(MatSort, {static: true}) sort: MatSort;
  @ViewChild('filter',  {static: true}) filter: ElementRef;

  ngOnInit() {
    this.loadData();

    //this.getAllUsers();
    }
  //getAllUsers(){
  //  this.dataApi.getAllUsers()
  //  .subscribe(users => console.log(users)); }

  refresh() {
    this.loadData();
  }

  addNew(user?: User) {
    const dialogRef = this.dialog.open(AddDialogComponent, {
      data: {user: user} 
    });

    dialogRef.afterClosed().subscribe(result => {
      if (result === 1) {
        // After dialog is closed we're doing frontend updates
        // For add we're just pushing a new row inside userService
        this.exampleDatabase.dataChange.value.push(this.userService.getDialogData());
        this.refreshTable();
      }
    });
  }

  startEdit(i: number, id: number, name: string, email: string, imageUrl: string, createdate: Date,  sapUserId: string, roles: ()) {
    this.id = id;
    // index row is used just for debugging proposes and can be removed
    this.index = i;
    console.log(this.index);
    const dialogRef = this.dialog.open(EditDialogComponent, {
      data: {id: id, name: name, email: email, imageUrl: imageUrl, createdate: createdate, sapUserId: sapUserId, roles: roles}
    });

    dialogRef.afterClosed().subscribe(result => {
      if (result === 1) {
        // When using an edit things are little different, firstly we find record inside userService by id
        const foundIndex = this.exampleDatabase.dataChange.value.findIndex(x => x.id === this.id);
        // Then you update that record using data from dialogData (values you enetered)
        this.exampleDatabase.dataChange.value(foundIndex) = this.userService.getDialogData();
        // And lastly refresh table
        this.refreshTable();
      }
    });
  }

deleteItem(i: number, id: number, name: string, email: string, imageUrl: string, createdate: string, sapUserId: string, roles: ()) {
  this.index = i;
  this.id = id;
  const dialogRef = this.dialog.open(DeleteDialogComponent, {
    data: {id: id, name: name, email: email, imageUrl: imageUrl, createDate: createdate, sapUserId: sapUserId, roles: roles}
  });

  dialogRef.afterClosed().subscribe(result => {
    if (result === 1) {
      const foundIndex = this.exampleDatabase.dataChange.value.findIndex(x => x.id === this.id);
      // for delete we use splice in order to remove single object from DataService
      this.exampleDatabase.dataChange.value.splice(foundIndex, 1);
      this.refreshTable();
    }
  });
}

private refreshTable() {
  // Refreshing table using paginator
  // Thanks yeager-j for tips
  // https://github.com/marinantonio/angular-mat-table-crud/issues/12
  this.paginator._changePageSize(this.paginator.pageSize);
}

  /*   // If you don't need a filter or a pagination this can be simplified, you just use code from else block
    // OLD METHOD:
    // if there's a paginator active we're using it for refresh
    if (this.dataSource._paginator.hasNextPage()) {
      this.dataSource._paginator.nextPage();
      this.dataSource._paginator.previousPage();
      // in case we're on last page this if will tick
    } else if (this.dataSource._paginator.hasPreviousPage()) {
      this.dataSource._paginator.previousPage();
      this.dataSource._paginator.nextPage();
      // in all other cases including active filter we do it like this
    } else {
      this.dataSource.filter = '';
      this.dataSource.filter = this.filter.nativeElement.value;
    }*/

    public loadData() {
      this.exampleDatabase = new UserService(this.httpClient);
      this.dataSource = new ExampleDataSource(this.exampleDatabase, this.paginator, this.sort);
      fromEvent(this.filter.nativeElement, 'keyup')
        // .debounceTime(150)
        // .distinctUntilChanged()
        .subscribe(() => {
          if (!this.dataSource) {
            return;
          }
          this.dataSource.filter = this.filter.nativeElement.value;
        });
    }
  }

export class ExampleDataSource extends DataSource<User> {
  _filterChange = new BehaviorSubject('');

  get filter(): string {
    return this._filterChange.value;
  }

  set filter(filter: string) {
    this._filterChange.next(filter);
  }

  filteredData: User() = ();
  renderedData: User() = ();

  constructor(public _exampleDatabase: UserService,
              public _paginator: MatPaginator,
              public _sort: MatSort) {
    super();
    // Reset to the first page when the user changes the filter.
    this._filterChange.subscribe(() => this._paginator.pageIndex = 0);
  }

  /** Connect function called by the table to retrieve one stream containing the data to render. */
  connect(): Observable<User()> {
    // Listen for any changes in the base data, sorting, filtering, or pagination
    const displayDataChanges = (
      this._exampleDatabase.dataChange,
      this._sort.sortChange,
      this._filterChange,
      this._paginator.page
    );

    this._exampleDatabase.getAllUsers();

    return merge(...displayDataChanges).pipe(map( () => {
        // Filter data
        this.filteredData = this._exampleDatabase.data.slice().filter((user: User) => {
          const searchStr = (user.id + user.name + user.email + user.imageUrl + user.createdate + user.sapUserId + user.roles).toLowerCase();
          return searchStr.indexOf(this.filter.toLowerCase()) !== -1;
        });

        // Sort filtered data
        const sortedData = this.sortData(this.filteredData.slice());

        // Grab the page's slice of the filtered sorted data.
        const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
        this.renderedData = sortedData.splice(startIndex, this._paginator.pageSize);
        return this.renderedData;
      }
    ));
  }

  disconnect() {}

  /** Returns a sorted copy of the database data. */
  sortData(data: User()): User() {
    if (!this._sort.active || this._sort.direction === '') {
      return data;
    }

    return data.sort((a, b) => {
      let propertyA: number | string = '';
      let propertyB: number | string = '';
      let propertyC: Date | string = '';

      switch (this._sort.active) {
        case 'id': (propertyA, propertyB) = (a.id, b.id); break;
        case 'lastname': (propertyA, propertyB) = (a.name, b.name); break;
        case 'email': (propertyA, propertyB) = (a.email, b.email); break;
        case 'photoURL': (propertyA, propertyB) = (a.imageUrl, b.imageUrl); break;
        case 'createdate': (propertyC, propertyC) = (a.createdate, b.createdate); break;
        case 'sapid': (propertyA, propertyB) = (a.sapUserId, b.sapUserId); break;
      }

      const valueA = isNaN(+propertyA) ? propertyA : +propertyA;
      const valueB = isNaN(+propertyB) ? propertyB : +propertyB;
      const valueC = isNaN(+propertyC) ? propertyC : +propertyC;

      return (valueA < valueB ? -1 : 1) * (this._sort.direction === 'asc' ? 1 : -1);
    });
  }

}


my user.ts model



export class User {
    id: number;
    name: string;
    email: string;
    imageUrl?: string;
    emailVerified?: boolean;
    sapUserId: string;
    provider?: string;
    providerId?: string;
    createdBy?: string;
    createdate?: string;
    updatedBy?: string;
    createDate?: string;
    updateDate?: string;
    lastLoginDate?: string;
    roles: string;
    plants?:any();
    totalPages?: number;
    totalElements?: number;
}

2.- The other point its how to slice or filter the content () into the json response to load the datatable.

Thanks.

Pagination not work on page but work on category

i am using kriesi Pagination, it is working perfectly fine category page but it when i do similar query on page then it is not working. any idea why ?

function kriesi_pagination($pages = '', $range = 2){  
 $showitems = ($range * 2)+1;  
 global $paged;
 if(empty($paged)) $paged = 1;
 if($pages == '')
 {
     global $wp_query;
     $pages = $wp_query->max_num_pages;
     if(!$pages)
     {
         $pages = 1;
     }
 }   

 if(1 != $pages)
 {
     echo "<div class='pagination'>";
     if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>&laquo;</a>";
     if($paged > 1) echo "<a class='prev' href='".get_pagenum_link($paged - 1)."'>&lsaquo; Previous</a>";

     for ($i=1; $i <= $pages; $i++)
     {
         if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
         {
             echo ($paged == $i)? "<span class='current'>".$i."</span>":"<a href='".get_pagenum_link($i)."' class='inactive' >".$i."</a>";
         }
     }

     if ($paged < $pages) echo "<a class='next' href='".get_pagenum_link($paged + 1)."'>Next &rsaquo;</a>";  
     if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>&raquo;</a>";
     echo "</div>n";
 }

}

my page query is

    <?php query_posts(array('category_name' => 'm-directory',
                          'meta_key'=> 'mno',
                         'orderby'=> 'meta_value',
                         'order'=> 'ASC')); if ( have_posts() ) :
while ( have_posts() ) : the_post(); ?>       <li class="post">  
     ...
   </li>  <?php endwhile;  kriesi_pagination(); ?>     <?php else : ?> <p><?php _e('Sorry, no posts matched your criteria.'); ?></p> <?php

endif; ?>

Pagination in SharePoint Rest API

We have to load records into page using REST API and to show 5 records per screen. So we want to have Prev and Next buttons so that user can navigate backward and front as loading of all records at a time is too time consuming due to various calculations.

I achieved Next Button functionality with data.d.__next but now i want to go back as well. So how i can go back to see my records.

Below is the code right now.

$(document).ready(function (){ 

    $("#Next").click(function() {

        if(nextURL)
        {
        //clear body of table
            $('tbody').empty();
            //Load next 5 items
        fetchDetails(nextURL)

        }


      });
});
var URL = siteURL + "/_api/web/lists/getByTitle('System')/items?$Top=5&$select=*&$orderby=Title asc";
var nextURL="";

funtion fetchDetails(URL)
{
    ajax({
            url: URL,
            type: "GET",
            headers: {
                "Accept": "application/json;odata=verbose",
                "X-RequestDigest": $('#__REQUESTDIGEST').val()
                      },
            success: function(data) {
                nextURL = data.d.__next;
                }
        });
}

customization – Is there a way to by-pass the pagination function on one custom template?

I’m working on a site where the client wants only the linked titles of all posts in a particular category on one page. That is, the query does not pick up the smaller number of posts that is defined in Settings from that one particular template.

I could do this if I by-pass the loop entirely, but is it possible within the normal loop?

Rest API Pagination – Why some APIs does not allow the consumer to specify the page size?

I am wondering why some RESTful APIs are not allowing the consumer to specify the records per page? Is there some kind of vulnerability or is it just “keep it simple” way of doing things? I am currently working on application that should fetch 10 records per page but I am forced to choose between:

  • fetching all records from the API and do the paging on my side
  • utilising their paging that returns 100 records and the next 100 will be returned if you add additional GET param

However, I do the paging on my side but that’s not very smart once the records number becomes very large.

So, I am wondering why are they forcing the page size on their side and not allowing flexibility?

WordPress pagination links with query arguments

I put some arguments to the paginate_links function and managed to paginate with query arguments instead of path, but on the first page it doesn't rewrite my arguments, it just keeps the current page: if I'm on page 3, the ; url of the first page will be ?page=3 instead of empty. I have to delete it or set it as ?page=1. I used the following code

            global $wp_query;
            $current = $wp_query->query_vars('page') > 1 ? $wp_query->query_vars('page') : 1;
            echo paginate_links(
                    (
                        'base' => '%_%',
                        'format' => '?page=%#%',
                        'total' => $wp_query->max_num_pages,
                        'current' => $current,
                        'show_all' => true,
                        'type' => 'list',
                    )
            );

Remove pagination of the page from the e-commerce category while preserving the relevance of the SEO text

I administer an e-commerce website where currently we have pagination implemented on each category page.

On the first page of each category, we have SEO text at the bottom – a description of the category that helps our page rank higher in the search results. In many cases, it is long enough that it cannot be placed at the top of the page.

I am flirting with the idea of ​​converting our structure into an "infinite scrolling" experience, to completely remove the pagination. I realize that this would give SEO benefits.

However, I am seriously concerned that a long list of products will dilute the importance of our category description below. I remember reading somewhere that Google places more importance on content that is higher up on the page.

Has anyone tried to implement "infinite scrolling" and have you noticed any serious changes in your ranking? Or maybe you have an idea of ​​how it will affect the relevance of the category description at the bottom of the page?

jquery – How do I get a Datatable pagination number from the datatables.net library?

I tried to save the page value of a data table from the datatables.net library and then send it by POST.

I have seen information about it and I have found codes like these:

var table = $('#dataTables-example').DataTable();
      var info = table.page.info();
      var indice = info.page+1;

y

fnDrawCallback or fnInfoCallback

… However, it is taking me a while and I thought you might already have a code that does this and that helps me.

I just need to capture the value of the page in a hidden entry, so I already know what to do.

Thank you

previous article link – Unable to add pagination

I can't add pagination to split my posts between pages and navigate between pages.
Currently all 20 messages that I have loads at once. I want to add a pagination at the bottom of my page and display the messages by 5.

I have a custom message type that I have defined as a project. I have 2 pages. Home page and journal. The home page shows the flow of my project posting type and the journal shows my regular blog posts. I want these two pages to be paginated.

My current index.php which is my home page is as follows:




'project','posts_per_page' => 20 ); $loop = new WP_Query( $args ); if( $loop->have_posts() ): while( $loop->have_posts() ): $loop->the_post(); get_template_part( 'content', get_post_format() ); endwhile; endif; ?>

My reading parameters are as follows:
Play settings

I'm curious as to whether this is due to my custom post types, I would appreciate any help or lead to help me add pagination to the page.

When I tried the googled paginate_links solution, I received no links.
I also tried previous_posts_link () and it gives me the links and I can move between pages, but each page reloads the same 20 messages, without any dive.

Thank you so much!