Sebastian Jeliazkov Sebastian Jeliazkov - 2 months ago 18
jQuery Question

How to use Infinite Ajax scroll in table, new data new <tr>

I'm trying to use jQuery's plugin Infinite AJAX Scroll but it is creating

<div class="item">
and when I try to set the class to td's it's not working at all.

Jquery Infinite Ajax scroll settings

<script type="text/javascript">
$(document).ready(function() {
// Infinite Ajax Scroll configuration
jQuery.ias({
container : '.wrap', // main container where data goes to append
item: '.item', // single items
pagination: '.nav', // page navigation
next: '.nav a', // next page selector
loader: '<img src="css/ajax-loader.gif"/>', // loading gif
triggerPageThreshold: 5 // show load more if scroll more than this
});
});
</script>


My HTML/PHP Code

echo '<table id="gradient-style" summary="LMS">
<thead>
<th scope="col">ID<br>Create time</th>
<th scope="col">Тема<br>Submitter</th>
<th scope="col">Собственик<br>Последно редактиран</th>
<th scope="col">Статус</th>
</thead>
<tbody class="wrap">';
$sql = "SELECT date, SUBJECT, ID, RESOLVETIME, FULLDATE, STATE, REQUESTOR, QUEUEID, CUSTOMER_NAME, CUSTOMER_LNAME, CUSTOMER_ADDRESS FROM
(SELECT FROM_UNIXTIME(rt.createtime, GET_FORMAT(DATE,'EUR')) as date,
rt.subject as SUBJECT,
rt.id as ID,
rt.resolvetime as RESOLVETIME,
rt.createtime as FULLDATE,
rt.state as STATE,
rt.requestor as REQUESTOR,
rt.queueid as QUEUEID,
c.name as CUSTOMER_NAME,
c.lastname as CUSTOMER_LNAME,
c.address as CUSTOMER_ADDRESS
FROM rttickets rt
LEFT JOIN customers c ON (rt.customerid = c.id)
LEFT JOIN rtqueues q ON (rt.queueid = q.id)) as list ORDER BY ID DESC ";
$start = ($page * $limit) - $limit;
if(isset($_GET['quid'])) {
if($_GET['quid'] == -1) {
$quid = '-1';

$sql .= " LIMIT {$start}, {$limit}";
} else {
$quid = (int)$_GET['quid'];

$sql .= " WHERE queueid = '$quid' LIMIT $limit";
}
} else {
$quid = '-1';

$sql .= " LIMIT {$start}, {$limit}";
}


if( $reds > ($page * $limit)) {
$next = ++$page;
}
$res = $mysqli->query($sql) or trigger_error($mysqli->error."[$sql]");

while($row = $res->fetch_array()) {
$id = $row['ID'];
$show_id = str_pad($id, 6, '0', STR_PAD_LEFT);
$state = $row['STATE'];
$requestor = $row['REQUESTOR'];
$customer_fname = $row['CUSTOMER_NAME'];
$customer_lname = mb_strtoupper($row['CUSTOMER_LNAME']);
$cust_address = $row['CUSTOMER_ADDRESS'];
$subject = $row['SUBJECT'];
$subject_ready = mb_strimwidth($subject, 0, 25, "...");
$date = $row['date'];
$createtime = $row['FULLDATE'];
$ctime = date("Y/m/d h:i:s", $createtime);
$resolve_sql = $row['RESOLVETIME'];
if($state == 0) {
$state = 'Нов';
} else if($state == 1) {
$state = 'Отворен';
} else if ($state == 2) {
$state = 'Разрешен';
} else if ($state == 3) {
$state = 'Dead';
}
if($resolve_sql == 0) {
$resolve = $ctime;
} else {
$resolve = date("Y/m/d h:i:s", $resolve_sql);
}
echo '<tr class="item" id="item-'.$id.'"><td><a href="ticketview.php?id='.$id.'">'.$show_id.'<br>'.$ctime.'</a></td><td><a href="ticketview.php?id='.$id.'">'.$subject.'<br>'.$customer_lname.' '.$customer_fname.' ('.$cust_address.')</a></td><td><a href="ticketview.php?id='.$id.'">'.$requestor.'<br>'.$resolve.'</td></a><td><a href="ticketview.php?id='.$id.'">'.$state.'</a></td></tr></div>';
}
echo '</tbody></table>';


I want every new row from the database to go in
<tr>
but I can't understand how to change it

Answer

I stand by my original comment that you should update the code to use divs with the proper display, as they will play nicer with what you are trying to accomplish, and the plug-ins you are using.

I think the selector is getting confused due to some ill formed HTML echoed by PHP.

Try this at the end of your last while loop:

    echo '<tr class="item" id="item-'.$id.'"><td><a href="ticketview.php?id='.$id.'">'.$show_id.'<br>'.$ctime.'</a></td><td><a href="ticketview.php?id='.$id.'">'.$subject.'<br>'.$customer_lname.' '.$customer_fname.' ('.$cust_address.')</a></td><td><a href="ticketview.php?id='.$id.'">'.$requestor.'<br>'.$resolve.'</a></td><td><a href="ticketview.php?id='.$id.'">'.$state.'</a></td></tr>';