利用bootstrap怎么实现一个table点击翻页功能

这篇文章主要介绍了利用bootstrap怎么实现一个table点击翻页功能，此处通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考价值，需要的朋友可以参考下：

创新互联建站是一家专注于成都网站制作、成都网站建设与策划设计,南充网站建设哪家好?创新互联建站做网站,专注于网站建设10年,网设计领域的专业建站公司;建站业务涵盖:南充等地区。南充做网站价格咨询:18982081108

Bootstrap是什么

Bootstrap是目前最受欢迎的前端框架，它是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷，它还有一个响应最好的Grid系统，并且能够在手机端通用，而Bootstrap是使用许多可重用的CSS和JavaScript组件，可以帮助实现需要的几乎任何类型的网站的功能，此外，所有这些组件都是响应式的。

具体内容如下

//var productids = $("body",window.parent.frames[0].document).find('.ptids');//textarea存放数据
var productids = $('textarea');
var merge_order_object= {};//页码+id组成的对象
var jsonObj = {};
var current_page = "";//当前页码

//表格渲染完成操作
table.on('post-body.bs.table', function (e, settings, json, xhr) {

　　var merge_order_arr = [];
　　var objString = productids.val();
　　if(objString !== ""){
　　　　jsonObj = JSON.parse(objString);//转换为json对象
　　　　$.map(jsonObj, function (arr) {
　　　　　　// merge_order_arr.push.apply(merge_order_arr,arr);//合并数组
　　　　　　merge_order_arr = merge_order_arr.concat(arr);//合并数组
　　　　});
　　　　$.each(settings,function (i,v) {
　　　　　　$.each(merge_order_arr,function (index,value) {
　　　　　　　　if(v.id === parseInt(value)){
　　　　　　　　　　$(e.target).find('tbody tr').eq(i).find('input').click();
　　　　　　　　}
　　　　　　});
　　　　});
　　　　// productids.val( objString );
　　}
　　// debugger;
});
$('input[name="btSelectAll"], table tbody, input[name="btSelectItem"]').change(function () {//复选框
　　current_page = table.bootstrapTable('getOptions').pageNumber;
　　merge_order_object[current_page] = Table.api.selectedids(table);
　　productids.val( JSON.stringify(merge_order_object) );//转换成字符串

});

到此这篇关于利用bootstrap怎么实现一个table点击翻页功能的文章就介绍到这了,更多相关利用bootstrap怎么实现一个table点击翻页功能的内容请搜索创新互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持创新互联！