我有100 images
,我需要显示3 per page
。
所以任何人都可以建议我使用jquery对这些图像进行分页的最佳方式。
我尝试使用jquery datatable
插件,但它不适用于图像。
如果有人知道我们如何实现它,请告诉我。
我的HTML代码
<table id="resultsTable" >
</table>
JS
function getCategory(){
var selectAllProductsName ='select * from Category';
//alert('searchProductNames');
//$("#resultsTable").html('')
db.transaction(function (tx) {
tx.executeSql(selectAllProductsName, [], function (tx, result) {
dataset = result.rows;
var dataAdd = " ";
var productCount=0;
for (var i = 0; i < (dataset.length/3); i++) {
dataAdd = dataAdd + '<tr>'
for (var j = 0; j < 3 && productCount<dataset.length; j++){
var row = dataset.item(productCount++);
//dataAdd = dataAdd + '<img width="80" height="80" border="0" src="images/circle.jpg" value="'+row['categoritype']+'" name="itemSelected" onclick="getToShowSubCategory(this)"/><td>'+row['categoritype']+'</td>';
dataAdd = dataAdd + '<td background="images/big_circles.png" style="color:red" valign="bottom" align="center" width="266px" height="267px" value="'+row['categoritype']+'" name="itemSelected" onclick="getToShowSubCategory(this)">'+row['categoritype']+'</td><td width="5%" height="0px"></td>';
//dataAdd = dataAdd + '<td <img src="images/big_circles.png" style="color:red" valign="bottom" align="center" width="266px" height="267px" value="'+row['categoritype']+'" name="itemSelected" onclick="getToShowSubCategory(this)">'+row['categoritype']+'</img></td>'+'<td width="5%" height="0px"></td>';
}
dataAdd = dataAdd + '</tr>'
}
$("#resultsTable").append('<thead>');
$("#resultsTable").append('<tr>');
$("#resultsTable").append('<th>Name</th> <th>Position</th> <th>Office</th> <th>Name1</th> <th>Position1</th> <th>Office1</th>');
$("#resultsTable").append('</tr>');
$("#resultsTable").append('</thead>');
$("#resultsTable").append('<tbody>');
$("#resultsTable").append(dataAdd);
$("#resultsTable").append('</tbody>');
$('#resultsTable').DataTable( {
"pagingType": "full_numbers",
"ordering": false
} );
});
});
}