Question

我正在尝试使用bootstrap进行分页。
这是我的代码https://jsfiddle.net/x9u8u7h5/2/。分页在我的代码中不起作用。我做错了什么？

var roleList=[{
"sNo"     :"1",
"roleName":"Designer"
},
{
"sNo"     :"2",
"roleName":"Developer"
},
{
"sNo"     :"3",
"roleName":"HR Dept"
},
{
"sNo"     :"4",
"roleName":"Project Manager"
}
];

$(document).ready(function(){debugger
    $('#mydata').dataTable({

            });
            empRoles();
            $('.update').hide();

});

function empRoles(){
        for(var i=0;i<roleList.length;i++)
        {
        var table='<tr id="row'+i+'"><td>'+roleList[i].sNo+'</td><td class="roleName" id="name'+i+'">'+roleList[i].roleName+'</td><td><button class="btn dlt btn-danger" data-toggle="modal" data-target="#confirm"><i class="fa fa-trash-o"></i>Delete</button></td><tr>';
        $('#roleListTable').append(table)
        }
}

Answer 1

正如@Ryan所说，您以奇怪的方式添加数据。看看这个：

$('#mydata').dataTable({
    "data": roleList,
    "columns": [{
        "data": "sNo"
    }, {
        "data": "roleName",
        "className": "roleName"
    }, {
        "data": "roleName",
        "render": function() {
            return $("<button></button>", {
                "text": "Delete",
                "class": "btn dlt",
                "data-toggle": "modal",
                "data-target": "#confirm"
            }).prepend("<i></i>", {
                "class": "fa fa-trash-o"
            }).prop("outerHTML")
        }
    }],
    "createdRow": function(row, data, dataIndex) {
        $(row).attr("id", "row" + data.sNo);
    },
    "rowCallback": function(row, data, index) {
        $('td:eq(1)', row).attr("id", "name" + data.sNo);
    }
});

这可以通过手动构建行来完成您自己所做的一切，它可以让您更好地控制数据。在这里工作JSFiddle。祝你好运！

我认为它可能会进行更多优化，但它可以满足您目前的需求。

Answer 2

您没有正确地将数据添加到表中。

尝试使用此功能 https://datatables.net/reference/api/row.add()

或者看看如何添加数据 https://datatables.net/examples/data_sources/index.html

Bootstrap分页不起作用

2 个答案: