参考资料:
http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
<table data-toggle="table" id="table" data-toolbar="#toolbar" data-single-select="true"
data-click-to-select="true">
<thead>
<tr class="info">
<th data-checkbox="true"></th>
<th data-field="empid" data-visible="false">id</th>
<th data-field="列字段,与后台查询出来的要对应">列说明</th>
</tr>
</thead>
</table>
function initTable(url, tableId) {
$table = $('#'+tableId);
$table.bootstrapTable('destroy');
$table.bootstrapTable({
url: url,
method: 'post',
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
pagination: true,
pageNumber: staticObj.pageNumber,
pageSize: staticObj.pageSize,
pageList: [10, 25, 50, 100],
//分页方式:client客户端分页,server服务端分页(*)
sidePagination: "server",
/*默认值为 'limit' ,在默认情况下 传给服务端的参数为:offset,limit,sort
设置为 '' 在这种情况下传给服务器的参数为:pageSize,pageNumber*/
//queryParamsType: '',
//查询参数,每次调用是会带上这个参数,可自定义。若设置此参数,则不能自动传offset和limit参数
/*queryParams: function(params) {
//var subcompany = $('#subcompany option:selected').val();
return {
//pageNumber: params.offset,
//pageSize: params.limit
//companyId:subcompany,
};
},*/
/*data: data*/
});
}
分页的话后台一定要接收这两个参数
private Integer offset;
private Integer limit;
@Action(value="findAll", results={@Result(name = "json" , type="json", params={"root","map"})})
public String findAll(){
List<EmployeeEntity> list = service.findAll();
map = new HashMap();
map.put("total",service.count()); //数据总数
map.put("rows",list); //分页后的数据
return "json";
}
分享到:
相关推荐
在JavaScript中,通过`bootstrapTable`方法初始化表格,并配置必要的参数。 ```javascript $(function () { $('#table').bootstrapTable({ url: 'data.json', // 数据源 columns: [ /* 列定义 */ ], // 其他...
为了更好地利用这个组件,你需要了解 Bootstrap Table 和 x-editable 的基本用法,以及 JavaScript 和 AJAX 的基础知识。同时,熟悉 HTML 和 CSS 也非常重要,因为它们是构建和定制界面的基础。在实际应用中,你可能...
$("#table").bootstrapTable({ fixedColumns: true, fixedNumber: 2 // 指定固定两列 }); ``` 在实际应用中,可能会遇到一些常见问题,比如滚动同步不准确、宽高计算错误或者与其它插件冲突等。这些问题通常可以...
1. **Bootstrap Table基础**:理解Bootstrap Table的基本结构和用法,包括如何定义表格数据、如何应用样式以及如何使用内置的插件和方法。 2. **固定列原理**:固定列的实现通常是通过在表格外层添加一个带有定位的...
Bootstrap-table 是一个基于 Bootstrap 框架的前端插件,用于创建功能丰富的表格。这个插件不仅提供了基本的表格展示,还支持数据分页、排序、过滤、自定义列显示等高级特性,使得在网页上展示大量数据变得更加便捷...
$('#myTable').bootstrapTable(); TableExport(document.getElementById('myTable'), { formats: ['csv', 'excel'], exportDataType: 'all', // 其他配置项... }); function tableExport() { $('#myTable')...
4. **网页表格**:Bootstrap Table不仅提供基本的HTML表格功能,还增加了许多增强功能,如列排序、列隐藏、行选择、数据搜索、自定义事件处理等。这使得它成为处理大量数据或需要复杂交互场景的理想选择。 5. **...
首先,我们需要了解 Bootstrap-table 的基本结构。Bootstrap-table 的每页显示记录数是通过一个下拉框来选择的,该下拉框提供了固定的选项,如10、20、30等。然而,在某些情况下,我们可能需要让用户可以输入任意的...
Bootstrap Table是一款广泛应用于Web开发中的开源插件,它基于Twitter Bootstrap框架,为开发者提供了一种简单、优雅的方式来展示数据,并提供了丰富的功能,如排序、筛选、分页等。这款插件设计初衷是解决传统HTML...
2. **Bootstrap Table介绍**:Bootstrap Table是一个轻量级、易于定制的表格插件,它提供了一些基本和高级特性,如排序、分页、搜索、行选择、列显示隐藏等。它通过简单的HTML标记和JavaScript选项即可轻松集成到...
在实际应用中,你可以根据项目需求,结合Bootstrap Table的其他特性,如排序、过滤和搜索功能,构建出更强大的数据展示和管理工具。 总的来说,Bootstrap Table V1.11.1的分页导航扩展是一个实用的功能增强,它通过...
2. 创建一个基本的Bootstrap表格结构。 3. 使用JavaScript(可能是jQuery)来初始化表格,并设置`reorderRows`为`true`,以启用拖拽排序功能。 4. 可选地,你可以监听`onReorderRow`事件,以便在排序发生时更新后端...
$('#table').bootstrapTable(); // 使用colResizable插件实现列宽拖动 $('#table').colResizable({ fixed: false, // 是否固定列宽 liveDrag: true, // 是否实时拖动 helper: function (index, th) { // ...
这个文件名可能代表了项目的基本结构,其中包含了整个ASP.NET MVC5应用的所有文件和文件夹,如Controllers、Models、Views、Scripts、Stylesheets等。Controllers负责业务逻辑,Models代表数据模型,Views用于展示...
$('#table').bootstrapTable({ pagination: true, pageSize: 10, // 更多配置... }); }); ``` 在上述代码中,`pagination`设置为`true`启用分页,`pageSize`设为每页10条记录。Bootstrap Table还提供了其他...
这个"bootstrap-table-demo"压缩包文件包含了演示如何使用这个组件的示例代码和资源,帮助开发者快速理解和应用Bootstrap Table。 1. **基本用法**:Bootstrap Table 的使用通常涉及在HTML中定义一个表格结构,然后...
当所有依赖都引入后,浏览器会自动应用Bootstrap Table的固定列功能。如果`fixed-columns`压缩包中的文件包括了示例代码,你可以查看并学习如何将这个功能整合到自己的项目中。 需要注意的是,固定列功能可能会与...
例如,`$(table).bootstrapTable('load', data)`用于加载数据,`$(table).bootstrapTable('sort', {field: 'column', order: 'asc'})`用于排序,`$(table).bootstrapTable('toggleView')`用于切换表格视图。...
Bootstrap-Table是一款强大的前端表格插件,它充分利用了Twitter Bootstrap的样式和组件,为开发者提供了在Web应用中实现美观、可交互的表格功能。这款框架不仅支持基本的表格展示,还具备分页、排序以及丰富的数据...
这个压缩包"bootstrap-table-master.zip"很可能包含了该插件的完整源代码和资源,允许开发者自定义和扩展其功能,以适应各种Web项目的需求。 在Web开发中,Bootstrap是一种广泛使用的前端框架,它提供了统一的样式...