javascript - Why doesn't pagination come before/after tbody but within it? -
javascript - Why doesn't pagination come before/after tbody but within it? -
i've got table users based on number parameter. build in filter listens input , ajax phone call every time filter on name . howether table build contains rows users , sets pagination above whole table. when im filling tbody response of ajax phone call sets pagination within table.. how solved? filter function works perfect, pagination doesn't want to.
original page
<table id="users" class="ui-widget ui-widget-content"> <thead> <tr class="ui-widget-header "> <th>name</th> <th>bank</th> <th>iban</th> </tr> </thead> <tbody> <?php seek { //find out how many items in table $total = $pdo->query('select count(*) tatble1 nr = ' . $nr)->fetchcolumn(); if($total > 0){ //setting limit, offset, end, total , prepared query ... // have results? if ($stmt->rowcount() > 0) { // define how want fetch results $stmt->setfetchmode(pdo::fetch_assoc); // display results foreach ($stmt $row) { echo '<tr data-zp-id=' . $row["id"] . '> <td>' . $row["name"] . '</td> <td>' . $row["bank"] . '</td> <td>' . $row["iban"] . '</td> </tr>'; } echo '<div id="pagination">'; // "back" link $prevlink = ($page > 1) ? '<a href="?'.$cuturl.'&page=1" title="erste seite"><button class="faecher">«</button></a> <a href="?'.$cuturl.'&page=' . ($page - 1) . '" title="vorherige seite"><button class="faecher">‹</button></a>' : '<button class="faecher" id="fehlt">«</button> <button class="faecher" id="fehlt">‹</button>'; // "forward" link $nextlink = ($page < $pages) ? '<a href="?'.$cuturl.'&page=' . ($page + 1) . '" title="nächste seite"><button class="faecher">›</button></a> <a href="?'.$cuturl.'&page=' . $pages . '" title="letzte seite"><button class="faecher">»</button></a>' : '<button class="faecher" id="fehlt">›</button> <button class="faecher" id="fehlt">»</button>'; // display paging info echo '<div id="paging"> <p>', $prevlink, ' seite ', $page, ' von ', $pages, ' | zeige ', $start, ' - ', $end, ' von ', $total, ' ergebnissen ', $nextlink, ' </p> </div> </div>'; } } else { echo '<h2>keine personen gefunden!</h2>'; } } grab (exception $e) { echo '<p>', $e->getmessage(), '</p>'; } ?> </tbody> </table><br/><br/> <input type="text" id="filter" value=""/> how it's looking : filter function
$('#filter').on( 'input' , function(){ var filter_input = $(this).val(); $.ajax({ url : 'ajax4.php', type : 'post', info : { fil : filter_input } }) .done (function(response) { console.log("response : \n" + response); $('tbody').html(response); }) .fail (function(jqxhr, textstatus, errorthrown ) { alert('[ui-state-error ' + jqxhr.status + "] " + textstatus + " : " + errorthrown); }); //reset if(filter_input == "" || filter_input.length < 1){ window.location.reload(true); } }); ajax call
<?php if ($_server['request_method'] == 'post'){ session_start(); include "../connect.php"; (int) $nr = $_session["nr"]; (string) $filter = $_post["fil"]; seek { //find out how many items in table $total = $pdo->query('select count(*) table1 nr = ' . $nr . ' , name "%' . $filter . '%"')->fetchcolumn(); if($total > 0){ //setting limit, offset, end, total , prepared query ... // prepare paged query ... $stmt->execute(); // have results? if ($stmt->rowcount() > 0) { echo '<div id="pagination">'; // "back" link $prevlink = ($page > 1) ? '<a href="?'.$cuturl.'&page=1" title="erste seite"><button class="faecher">«</button></a> <a href="?'.$cuturl.'&page=' . ($page - 1) . '" title="vorherige seite"><button class="faecher">‹</button></a>' : '<button class="faecher" id="fehlt">«</button> <button class="faecher" id="fehlt">‹</button>'; // "forward" link $nextlink = ($page < $pages) ? '<a href="?'.$cuturl.'&page=' . ($page + 1) . '" title="nächste seite"><button class="faecher">›</button></a> <a href="?'.$cuturl.'&page=' . $pages . '" title="letzte seite"><button class="faecher">»</button></a>' : '<button class="faecher" id="fehlt">›</button> <button class="faecher" id="fehlt">»</button>'; // display paging info echo '<div id="paging"><p>', $prevlink, ' seite ', $page, ' von ', $pages, ' | zeige ', $start, ' - ', $end, ' von ', $total, ' ergebnissen ', $nextlink, ' </p></div> </div>'; // define how want fetch results $stmt->setfetchmode(pdo::fetch_assoc); // display results foreach ($stmt $row) { echo '<tr data-zp-id=' . $row["id"] . '> <td>' . $row["name"] . '</td> <td>' . $row["bank"] . '</td> <td>' . $row["iban"] . '</td> </tr>'; } /*tried pagination code here, didn't shown or happened*/ } } else { echo '<h2>keine personen gefunden!</h2>'; } } grab (exception $e) { echo '<p>', $e->getmessage(), '</p>'; } } ?>
which looks :
write 1 php file output pagination , after finish table, this:
ajax4.php should output following
<div id="your-tables-container"> <div id="pagination"> ... </div> <table> <thead> <tr class="ui-widget-header"> <th>name</th> <th>bank</th> <th>iban</th> </tr> </thead> <tbody> ... </tbody> </table> </div> javascript ajax phone call should update finish table, not tbody
your ajax phone call should this:
// seek jquery.load() method. makes ajax phone call , automatically replace innerhtml of selected dom-element: http://api.jquery.com/load/ $.ajax({ url : 'ajax4.php', type : 'post', info : { fil : filter_input } }).done(function(response) { console.log("response : \n" + response); $('#your-tables-container').html(response); }).fail(function(jqxhr, textstatus, errorthrown ) { alert('[ui-state-error ' + jqxhr.status + "] " + textstatus + " : " + errorthrown); }); in original php file have same/similar code again, necessary?
and in original php file should avoid write table code twice. utilize require or maybe file_get_contents or that:
<?php require_once('/path/to/ajax4.php'); // or maybe echo file_get_contents('/path/to/ajax4.php?parameter=if_you_need_it'); ?> javascript php jquery ajax dom
Comments
Post a Comment