how to rewrite URL address without redirect using Jquery?

Dung Do Tien Apr 10 2020 607

I am coding and display a table with paging. When clicking page index number to binding new data and I also want to change URL with the current page index selected.

My HTML content

<div class="col-md-2 form">
    <div class="table">
       <!-- Table display here ->
    </div>
    <div class="paging">
         <ul class="item-index">
            <li data-page-index="1">1</li>
            <li data-page-index="2">2</li>
            <li data-page-index="3">3</li>
            <li data-page-index="4">4</li>
         </ul>
    </div>
</div>

Jquery code

$("ul.item-index li").click(function(){
   var curentPageIndex = $(this).data("page-index");
   // Change Url here
});
Have 1 answer(s) found.
  • S

    Sandeep Kumar Apr 11 2020

    You can use to history.pushState() function to rewrite current url address. This function adds a state to the browser's session history stack.

    1. SYNTAX

    history.pushState(state, title, url) 
    

    In this :

    stateis a JavaScript object which is associated with the new history entry created by pushState() function.

    title: you can set it empty or null because most browsers currently ignores this parameter.

    url: it is an optional. This is new url will rewrite current url address.

     

    2. EXAMPLE

    var url ="https://quizdeveloper.com";
    history.pushState(null, "", url); 
    

    I think it's easy to solve your problem. For more detail, you can read more at https://developer.mozilla.org/en-US/docs/Web/API/History/pushState

    I hope this short information helpful to you.

Leave An Answer
* NOTE: You need Login before leave an answer

* Type maximum 2000 characters.

* All comments have to wait approved before display.

* Please polite comment and respect questions and answers of others.

Popular Tips

X Close