用于图像的jquery数据表插件

时间:2014-10-12 12:34:46

标签: jquery pagination

我有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
    } );
        });

    });


}

0 个答案:

没有答案