bootstrap datatable

<table id="screenTable" data-toggle="table">
<thead>
...
</thead>
</table>
$(function () {
$(‘#screenTable‘).bootstrapTable({
url: "/screen/list",
dataField: "rows",
cache: false, //是否使用缓存,默认为true
striped: true, //是否显示行间隔色
pagination: true, //是否显示分页
pageSize: 10, //每页的记录行数
pageNumber: 1, //初始化加载第一页,默认第一页
pageList: [10, 20, 50], //可供选择的每页的行数
search: true, //是否显示表格搜索
showRefresh: true, //是否显示刷新按钮
clickToSelect: true, //是否启用点击选中行
toolbar: "#toolbar_screen", //工具按钮用哪个容器
sidePagination: "server", //分页方式:client客户端分页,server服务端分页
queryParamsType: "limit", //查询参数组织方式
columns: [{
field: "id",
title: "ID",
align: "center",
valign: "middle"
}, {
field: "name",
title: "定制名称",
align: "center",
valign: "middle",
formatter: ‘infoFormatter‘
}, {
field: "time",
title: "定制时间",
align: "center",
valign: "middle"
},

{
title: ‘操作‘,
field: ‘operation‘,
align: ‘middle‘,
formatter:function(value,row){
alluserLisr.push(row);
return ‘<div class="ui-pg-div">‘+
‘<a href="javascript:void(0)" title="编辑" class="ui-icon icon-pencil grey" onclick="popedit(‘+row.id+‘);">编辑</a> ‘+
‘<a href="javascript:void(0)" title="删除" class="ui-icon icon-remove grey" onclick="popalert(‘+row.id+‘);">删除</a> ‘+
‘</div>‘;
}
}

],
formatNoMatches: function () {
return ‘无符合条件的记录‘;
}
});
$(window).resize(function () {
$(‘#screenTable‘).bootstrapTable(‘resetView‘);//当页面缩放时 将表格缩放  响应式
});
});
function infoFormatter(value, row, index) {
return ‘<a href=/screen/‘ + row.id + ‘ target="_blank">‘ + row.name + ‘</a>‘;
}

  

时间: 2024-12-15 01:06:22

bootstrap datatable的相关文章

php+bootstrap+dataTable+jquery分页列表

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script src="jquery-1.8.3.min.js" type="text/javascript"></script> <script&g

bootstrap datatable项目封装支持单选多选

自己在开发项目是根据自己的项目后台框架封装的jquery datatable插件基本上能集成到任何项目中使用,当然封装的还不够完美,给大家学习 调侃 使用介绍:query_dataTable({table : "#data_table",query : "#query"});<table id=data_table data-column="[{name:'NAME',title:'名称'},{name:'CODE',title:'编号',visib

Datatables+Bootstrap

http://sandbox.runjs.cn/show/thwac3ec 运行效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>bootstrap datatable demo</title> <meta name="viewport" content="widt

在Bootstrap开发框架中使用dataTable直接录入表格行数据(2)--- 控件数据源绑定

在前面随笔<在Bootstrap开发框架中使用dataTable直接录入表格行数据>中介绍了在Web页面中使用Jquery DataTable插件进行对数据直接录入操作,这种处理能够给用户提供较好的数据录入体验,本篇继续上篇的内容,继续介绍这个直接录入的处理操作,主要涉及到控件的初始化和数据源的绑定等操作内容,随着对这个处理的深入了解,我发现可以控制的内容也更加丰富,能够更好的实现各种所需的效果. 1.直接录入数据的界面分析 在之前介绍的数据直接录入处理的时候,界面效果如下所示. 上面的界面处

基于bootstrap + php +ajax datatable 插件的使用

Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 下面是我学习datatables写的一个服务器端(php)分页例子,该功能包含的功能 list: 1.在第一列添加checkbox,实现全选功能: 全选框没有排序按钮 2.在最后一列添加操作按钮 3.隐藏.显示该列字段:字段默认排序 4.薪水千分位.小数点两位格式化 5.内容太多用....截取文字: 鼠标移上去显示详情 6.替换字符,男字体显示红色,女显示绿色 7.给文字添加超链接

从Silverlight到ExtJS再到BootStrap,DataTable(DataGrid)的样式格式化原理没变

<table id="tableOrder" data-toolbar="tableBtnGroup" data-row-style="rowStyle"> <thead style="background-color: #f0f0f0;"> <tr> <th data-field="orderName" data-width="20%" dat

DataTable ajax分页+删除

这个框架前前后后跳进了很多次坑,也算是本人比较愚笨吧做了很长的时间而积累的经验... $(document).ready(function() { $("#sample").DataTable({ // Internationalisation. For more info refer to http://datatables.net/manual/i18n language: { "aria": { "sortAscending": "

bootstrap时间选择器使用方法详解

在bootstrap框架中的时间选择器有两种: dateTimePicke r和 dateRangePicker,今天就和大家一起来扒一扒其具体用法和实现源码. 1.dateTimePicker好像是官方嫡插件: 需要的文件: 1 <link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css"> 2 <script src="js/bootstrap-datetimep

BootStrap DataTables Spring MVC简单增删改查实例

1 <!DOCTYPE html> 2 <%@ page contentType="text/html;charset=gbk" language="java" %> 3 <%@page isELIgnored="false" %> 4 <meta name="viewport" content="width=device-width, initial-scale=1&quo