/    Sign up×
Community /Pin to ProfileBookmark

I want to add search feature to this paging code

Copy linkTweet thisAlerts:
Jul 09.2020

Hello,
I want to add search feature to this pagination code

Search without submit

“`
<input type=”text” id=”search” placeholder=”search”>

“`

If the search word is empty, all will be listed
If there is a search word, it will list the search results

“`
$(document).ready(function(){
var totalPage = parseInt($(‘#totalPages’).val());
console.log(“==totalPage==”+totalPage);
var pag = $(‘#pagination’).simplePaginator({
totalPages: totalPage,
maxButtonsVisible: 5,
currentPage: 1,
nextLabel: ‘Next’,
prevLabel: ‘Prev’,
firstLabel: ‘First’,
lastLabel: ‘Last’,
clickCurrentPage: true,
pageChange: function(page) {
$(“#content”).html(‘<tr><td colspan=”6″><strong>loading…</strong></td></tr>’);
$.ajax({
url:”load_data.php”,
method:”POST”,
dataType: “json”,
data:{page: page},
success:function(responseData){
$(‘#content’).html(responseData.html);
}
});
}
});
});
“`

No problem with code in load_data.php

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@vikram_jkJul 11.2020 — Create a custom input type text then create a jQuery or javascript code to call on input type ="text" change event.

Once the event is called.

url:"load_data.php?searchtext="+$("#SearchInput").val(),

then simply reload the content of simplePaginator using Ajax.
Copy linkTweet thisAlerts:
@VITSUSAJul 14.2020 — I agree with vikram_jk, have you tried to create jQuery or javascript code to call on input type ="text" change event.?
Copy linkTweet thisAlerts:
@cemalDec 31.2020 — hi ... You were able to omit the search feature to this paging code. If you could, can you share how you did it here ... thanks
Copy linkTweet thisAlerts:
@gecekuleauthorJan 03.2021 — @cemal#1626358

Hello there,

I separated Rows and Pagination links

Sample:
``<i>
</i>$rows = "";
$rows .= "line contents";
$rows .= "line contents";
...........................

$links = "";
$links .= "paging data";
$links .= "paging data";
.........................

//echo $output;
$jsonData = array(
"rows" =&gt; $rows, "links" =&gt; $links,
);
echo json_encode($jsonData);
}

ajax
dataType: "json",
$('#rows').html(data.rows);
$('#links').html(data.links);

HTML Table
&lt;tbody id="rows"&gt;
&lt;/tbody&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;td&gt;&lt;div id="links"&gt;&lt;/div&gt;&lt;/td&gt;
&lt;td&gt;&lt;input type="text" name="search"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/thead&gt;<i>
</i>``
https://drive.google.com/file/d/1y2jTxfY2Vvf8Kv6sBMHo6Pq9u92aj6tZ/view?usp=sharing
×

Success!

Help @gecekule spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.23,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...