将 Prev 和 Next 按钮调整到表格的角落

Question

我有一个数据表，在表的顶部和底部有一个 Previous 和 Next 按钮。

我的问题是如何调整左角的Previous 按钮和右角的Next 按钮，而不管表格宽度如何，现在这是我的sDom

"sDom": '<"top"ifp<"clear">>rt<"bottom"p>',

tysm

Answer 1

一种方法是为 Prev 和 Next 创建自定义按钮；然后将其附加到您的 DataTables 的 dom：

var table = $('#example').DataTable({
  pagingType: "simple",
  sDom: '<"top"if<"#top"><"clear">>rt<"#bottom">'
});

var cust_btn = '<div class="row custom_btn"><div class="col-xs-6 text-left"><div><button type="button" class="btn btn-default prev">Prev</button></div></div><div class="col-xs-6 text-right">   <div><button type="button" class="btn btn-default next">Next</button> </div></div></div>'
$('#bottom').append(cust_btn);
$('#top').append(cust_btn);


$('.next').on('click', function() {
  table.page('next').draw('page');
});

$('.prev').on('click', function() {
  table.page('previous').draw('page');
});

在按钮上附加一个点击事件，然后使用 DataTables 的页面 API。 Fiddle供参考。