将Prev和Next按钮调整为Table的角

时间:2018-06-08 01:44:30

标签: jquery html css datatables

我有一个数据表,在表的顶部和底部有一个PreviousNext按钮。

我的问题是如何调整左角的Previous按钮和角落右侧的Next按钮,无论表格宽度如何,现在这是sDom

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

tysm

1 个答案:

答案 0 :(得分:1)

一种方法是为Prev和Next创建自定义按钮;然后将其附加到DataTables的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'); });

#define MACRO VALUE

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