CODEWITHSUNDEEP
jqueryajaxpagination
Gislef
Gislef

Reputation: 1637

Ajax - Find, Filter or another?

I have pagination on a table, this table is with id="#content-of-table".

in the pagination links I left href="#" and inserted the urls into data-href

"<a href='#' class='page-link' data-href='".$self."?page_no=".$previous."'>Back</a>";

But I have two columns on my page, I use bootstrap, the first column has the form and the second the table

When I click on the pagination the entire page is loaded into the table id="#content-of-table"

Jquery

$('.page-link').click(function (e) {
   e.preventDefault();

   var url = $(this).data('href');

   $.ajax({
         url: url,

         success: function (response) {
              $('#content-of-table').html(response)
         }
   });
})

I tried using filter:

success: function (response) {
     $(response).filter('#content-of-table').html()
}

And find:

success: function (response) {
    $(response).find('#content-of-table').html()
}

But neither worked

I'm trying to load just the content of the id inside the table and not the entire page

Upvotes: 0

Views: 218

Answers (1)

adeneo
adeneo

Reputation: 318182

Using find should work, but there is a way to actually make sure you find the element, even if it's not a descendant element that find() normally can't find, and that is by making it a descendant, by using a new parent element.

$('.page-link').click(function (e) {
   e.preventDefault();

   var url = $(this).data('href');
   $.ajax({
       url     : url,
       success : function (response) {
           var html = $('<div />', {html : response}).find('#content-of-table').html();
           $('#content-of-table').html( html )
       }
   });
});

Upvotes: 1

Related Questions