使用LIST.JS和SQL查询集成排序方法

Question

I'm using LIST.js HERE CLICK for implementing pagination to my website.

To display list of data I'm using query and displaying data from database.
But how to integrate to this LIST.js sorting method?

E.G. I would like to sort data and display only year 2014 and so on?
>>> I can show full code of what I have now, if it will be relative, or as answer I need example with using LIST.js and Query sorting method (with data from database).

Like this one:

----------
-Year---V-
----------

SO when user select 2014...list will display where year=2014.

This is main part of the code:

<?php
include 'connect/con.php';
$queryMain ="SELECT newsvid.id, newsvid.addName, newsvid.vidTitle, newsvid.vidType, newsvid.size, newsvid.url, newsvid.vidSD, newsvid.published, videoinformation.vidLD, videoinformation.vidYear, videoinformation.vidCity, videoinformation.vidZanr, videoinformation.vidZanr2, videoinformation.vidZanr3, videoinformation.vidQuality, videoinformation.vidTranslated, videoinformation.vidTime  FROM newsvid, videoinformation WHERE newsvid.id = videoinformation.id AND approved='1'";
$result = mysqli_query($con,$queryMain);



echo "<div id=\"test-list\">
<ul class=\"pagination\"></ul>";
echo "<ul class=\"list\">";

while($row = mysqli_fetch_array($result)) {
echo "<div class=\"panel panel-default\">";
echo "<li><div class=\"name\">";
echo "<div class=\"panel-heading\">";
echo '<div><a class="panel-title btn-block" href="details.php?id='.$row['id'].'"><h3>'.$row['id'].' | '.$row['vidTitle'].'</h3></a></div>';
echo "</div>";

echo "<div class=\"panel-body\">";
echo "<div class=\"imgCover\"><img class=\"imageCover\"src=\"" . $row['url'] . "\"></div>";
echo "<div class=\"vidSD\">" . $row['vidSD'] . "</div>";
echo "<div class=\"vidDetails\">   

<hr class=\"style-two\">
<table>
<tr><td class=\"YEAR vidDetailsTD\"><strong>" . $lang['vtYear'] . "</strong></td><td class=\"vidDetailsTD\">" . $row['vidYear'] ."</td></tr>
<tr><td class=\"vidDetailsTD\"><strong>" . $lang['vtCity'] . "</strong></td><td class=\"vidDetailsTD\">". $row['vidCity'] ."</td></tr>
<tr><td class=\"vidDetailsTD\"><strong>" . $lang['vtGenre'] . "</strong></td><td class=\"vidDetailsTD\">". $row['vidZanr'] ." , ". $row['vidZanr2'] ." , ". $row['vidZanr3'] . "</td></tr>
<tr><td class=\"vidDetailsTD\"><strong>" . $lang['vtQuality'] . "</strong></td><td class=\"vidDetailsTD\">". $row['vidQuality'] ."</td></tr>
<tr><td class=\"vidDetailsTD\"><strong>" . $lang['vtTranslatedBy'] . "</strong></td><td class=\"vidDetailsTD\">". $row['vidTranslated'] ."</td></tr>
<tr><td class=\"vidDetailsTD\"><strong>" . $lang['vtVideoTime'] . "</strong></td><td class=\"vidDetailsTD\">". $row['vidTime'] .  "</td></tr>
</table> 
</div></div>";

echo " <div class=\"panel-footer\">";
echo '<h6><strong>' . $lang['vsdAuthor'] . '</strong><a href="../userPages/user.php?u='.$row['addName'].'">'.$row['addName'].'</a></h6>';
echo '<div><h6><strong>' . $lang['vsdPublished'] . '</strong>' . $row['published'] . '</h6></div>'; 
echo "</div></div></li></div>";
}
echo "</ul>";



mysqli_close($con);
?>