Come posso reindirizzare l'utente da una pagina all'altra usando jQuery o JavaScript puro?
jQuery non è necessario, e window.location.replace(...)
simulerà al meglio un reindirizzamento HTTP.
Il comando window.location.replace(...)
è migliore dell'uso di window.location.href
, perché replace()
non mantiene la pagina di origine nella cronologia della sessione, il che significa che l'utente non rimarrà bloccato in un fiasco infinito di pulsanti di ritorno.
Se volete simulare qualcuno che clicca su un link, usate
location.href
Se volete simulare un reindirizzamento HTTP, usate location.replace
Per esempio:
// similar behavior as an HTTP redirect
window.location.replace("http://stackoverflow.com");
// similar behavior as clicking on a link
window.location.href = "http://stackoverflow.com";
Sarebbe d'aiuto se tu fossi un po' più descrittivo in quello che stai cercando di fare. Se stai cercando di generare dati paginati, ci sono alcune opzioni su come farlo. Puoi generare link separati per ogni pagina a cui vuoi essere in grado di arrivare direttamente.
<a href='/path-to-page?page=1' class='pager-link'>1</a>
<a href='/path-to-page?page=2' class='pager-link'>2</a>
<span class='pager-link current-page'>3</a>
...
Nota che la pagina corrente nell'esempio è gestita diversamente nel codice e con i CSS.
Se vuoi che i dati della pagina siano cambiati via AJAX, è qui che entra in gioco jQuery. Quello che dovreste fare è aggiungere un gestore di click ad ogni tag di ancoraggio corrispondente ad una pagina diversa. Questo gestore di click invocherebbe del codice jQuery che va a recuperare la pagina successiva via AJAX e aggiorna la tabella con i nuovi dati. L'esempio qui sotto presuppone che tu abbia un servizio web che restituisca i dati della nuova pagina.
$(document).ready( function() {
$('a.pager-link').click( function() {
var page = $(this).attr('href').split(/\?/)[1];
$.ajax({
type: 'POST',
url: '/path-to-service',
data: page,
success: function(content) {
$('#myTable').html(content); // replace
}
});
return false; // to stop link
});
});