`

boostrap table接收到后台返回的数据格式不一致

bootstrap 
阅读更多
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bootstrap-table</title>
<link rel="stylesheet" href="./bootstrap-3.3.7/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="./bootstrap-3.3.7/plugin/bootstrap-table/bootstrap-table.min.css" />
<script src="./assets/js/jquery-2.1.4.min.js"></script>
<script src="./bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
<script src="./bootstrap-3.3.7/plugin/bootstrap-table/bootstrap-table.min.js"></script>
<script src="./bootstrap-3.3.7/plugin/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript">

$(document).ready(function () {
//加载grid-方法1：load
initGrid1();

//方法2：data:[]
initGrid2();

//方法3：responseHandler 转换后台返回的数据格式      url
initGrid3();
});
function initGrid2(){
$.ajax({
                type:"GET",
                url:'http://localhost:8080/x/ommon/findDept?dept_id=34',
                contentType:'application/json;charset=utf-8',
                dataType:'json',
                success:function (res) {
                    $('#dg2').bootstrapTable({
         striped: true,    //设置为 true 会有隔行变色效果
       cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
         smartDisplay: false,    //程序自动判断显示分页信息
         dataType:'json',
         idField:'id',
         columns: [{
         field:'id',
         checkbox:true
         },{
           title: '序号',
           align: 'center',
           halign: 'center',
           formatter: function (value, row, index) {
             return index + 1;
           }
         }, {
           field: 'dept_name',
           title: '服务名',
           align: 'center'
         }]
         ,data: res.datas
       });
              
                },
                    error:function(error){
                        console.log(error);
                    }
            });
}

function initGrid1(){
var tableData=[{'name':'a22','sum':100,'PV':999}];
$('#dg').bootstrapTable({
// pagination: true,   //启动分页
  striped: true,    //设置为 true 会有隔行变色效果
// uniqueId:'name',
cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
// pageSize: 20,//初始页记录数
  //sortable: true,    //排序
// pageList: [10,20], //记录数可选列表
  smartDisplay: false,    //程序自动判断显示分页信息
  dataType:'json',
  idField:'id',
  columns: [{
  field:'id',
  checkbox:true
  },{
    title: '序号',
    align: 'center',
    halign: 'center',
    formatter: function (value, row, index) {
      return index + 1;
    }
  }, {
    field: 'name',
    title: '服务名',
    align: 'center'
    //sortable:true    //排序
  }]
  //,data: tableData
});

$('#dg').bootstrapTable('load',[{name:'233',id:100}]);

$("#dg").bootstrapTable('append', {name:'234',id:101});

$("#dg").bootstrapTable('prepend',  {name:'231'});
/*
var ids = [];//定义一个数组
ids.push('231');//将要删除的id存入数组
$("#dg").bootstrapTable('remove', {field: 'name', values: ids});

//$("#dg").bootstrapTable('removeAll');

$('#dg').bootstrapTable('updateRow', {index: 0, row: {name:'236'}});


var opt={url:'http://localhost:8080/anger/listType'};
$("#dg").bootstrapTable('refresh',opt);
*/
}

function getSelect(){
var selrows=$("#dg").bootstrapTable('getSelections');
alert(selrows[0].name);

if(selrows.length>1){
alert(selrows[1].name);
}
}


function ajaxQuery(params){                    //使用ajax请求
            $.ajax({
                type:"POST",
                url:'http://localhost:8080/x/ommon/findDept?dept_id=346',
                contentType:'application/json;charset=utf-8',
                dataType:'json',
                success:function (res) {
                    console.log(res);
                   /* params.success({ //注意，必须返回参数 params
            total: res.datas.length,
            rows: res.datas
        });*/
       
        $('#table').bootstrapTable({
            columns:[{
    field:'dept_id',
  checkbox:true
  }, {
    field: 'dept_name',
    title: '服务名',
    align: 'center'
  }]    ,
                    data: res.datas
                });

                 // $('#table').bootstrapTable('load', {rows:res.datas,total:2});
                 // $('#dg').bootstrapTable('load', [{dept_name:'23'}]);
                    //$('#dg2').bootstrapTable('refresh', {url:'http://localhost:8080/x/ommon/findDept?dept_id=12'});
                },
                    error:function(error){
                        console.log(error);
                    }
            })
        }

function successCallback(data) {
alert(3);
}

function initGrid3(){
$('#dg3').bootstrapTable({
        url : "http://localhost:8080/x/ommon/findDept?dept_id=346",
method:'get',
responseHandler: function(res) { //转换数据格式
                return {
                    "total": res.datas.length,//总页数
                    "rows": res.datas   //数据
                 };
            },
//toolbar:'#toolbar',
singleSelect:true,
cache: false,
clickToSelect:true,
sidePagination: "server",
//sortName: "create_time",
//sortOrder: "desc",
pageSize: 15,
pageNumber: 1,
pageList: "[10, 25, 50, 100]",
showToggle: true,
showRefresh: true,
showColumns: true,
search: true,
pagination: true,
columns: [{
field: "dept_id",
checkbox:true,
},{
field: 'dept_name',
title: '推荐位名称',
switchable: true
},{
field: 'create_time',
title: '创建时间',
switchable: true,
sortable: true
}]
});

$('#dg3').bootstrapTable('load',{total:1,rows:[{dept_name:'abc'}]});
}
</script>
</head>
<body>
<div class="panel panel-default">
    <div class="panel-body">我是一个基础面板，带有默认主题样式风格</div>
</div>


<h5>带有头和尾的面板</h5>
<div class="panel panel-default">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
    </div>
</div>

<div class="panel panel-default">
    <div class="panel-body">
    <table id="dg" class="table table-bordered table-striped dataTable" data-toggle="dg" >
    <thead>
                <tr role="row">
                <th class="" style="">序号</th>
                <th class="" style="">服务名</th>
                </tr>
                </thead>
                <tbody>
</tbody>
    </table>
    </div>
</div>

<div class="panel panel-default">
    <div class="panel-body">
    <table id="dg2" data-toggle="dg2"  class="table table-bordered table-striped dataTable"  >
<thead style="background:#efefef;">
<tr>
<th data-checkbox="true"></th>
<th data-field="dept_id">ID</th>
<th data-field="dept_name">Name</th>
</tr>
</thead>
</table>
    </div>
</div>

<div class="panel panel-default">
    <div class="panel-body">
    <table id="dg3" class="table table-bordered table-striped dataTable">

</table>
    </div>
</div>

<button type="button" class="btn btn-default" onclick="getSelect()">选中</button>

</body>
</html>
分享到：
| access数据库jdbc连接
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    基于javaweb 的bootstrap table使用案例源码下载

    4. **数据格式**：Bootstrap Table要求服务器返回的数据格式为JSON，包含`total`（总条数）、`rows`（数据数组）等字段。数组中的每个元素应代表表格一行的数据。 5. **事件监听**：Bootstrap Table提供了一系列的...

    ssm+bootstraptable

    在SSM项目中，通常会结合Ajax技术，通过异步方式从后台获取数据，然后由BootstrapTable动态渲染，实现前端与后端的交互。 在"很简单的例子，使用bootstraptable实现分页，条件查询"这个项目中，我们可以推断出以下...

    Bootstrap表格控件的使用，与JAVA后台数据连接，可自动翻页

    在本例中，我们可以设置`url`参数为JAVA后台提供的数据接口，`dataType`通常设为`json`，因为JAVA后台通常会返回JSON格式的数据。然后，通过`success`回调函数处理接收到的数据，将其填充到`DataTables`中。 为了...

    bootstap-talbe日期格式化

    本文将详细探讨如何在 Bootstrap Table 中对日期进行格式化，同时考虑到后端数据来源是 MySQL 数据库，并且使用 Spring MyBatis 作为后台处理。 首先，我们需要理解 MySQL 中日期时间字段的存储格式，通常有 DATE、...

    bootstrap table实现单击单元格可编辑功能

    《Bootstrap Table实现单击单元格可编辑功能详解》 Bootstrap Table 是一款基于Bootstrap框架的响应式表格插件，它提供了一系列强大的功能...同时，合理地设定验证规则和后台处理逻辑，还能保证数据的准确性和一致性。

    bootstrap-treeview树节点实现动态加载（懒加载）

    3. **动态插入节点**：接收到服务器返回的数据后，使用Bootstrap Treeview提供的API，如`addNode`或`reload`方法，将新数据动态插入到现有树结构中。 4. **缓存管理**：为了提高性能，可以考虑缓存已加载的节点数据...

    bootstrap table 服务器端分页例子分享

    - 前端接收到服务器返回的 JSON 数据后，Bootstrap Table 会自动解析并更新表格内容，展示当前页的数据，并根据 `total` 更新分页组件的状态。 5. **其他配置**： - 还有其他一些配置项如 `cache`、`striped`、`...

    Bootstrap Table中的多选框删除功能

    Bootstrap Table是一款基于...注意，为了确保功能正常运行，必须确保表格使用了`bootstrapTable`方法初始化，这样才能利用其提供的API，如`getSelections`。此外，后台的删除操作应确保安全，防止未授权的删除行为。

    BootStrap table实现表格行拖拽效果

    后台的逻辑是将接收到的 JSON 数据反序列化为 `List&lt;WorkFlow&gt;` 类型的对象列表，然后通过业务逻辑层（BLL）的 `Sort` 方法对这些数据进行排序。排序的方式通常是删除现有数据库中的数据，然后重新保存排序后的列表...

    Bootstrap Table 在指定列中添加下拉框控件并获取所选值

    $('#table').bootstrapTable('updateCell', {index: indexSelected, field: 'name', value: valueSelected}); }); ``` 这里，我们为下拉框绑定了`change`事件，当用户更改选项时，会触发这个事件，更新相应的...

    如何将ajax请求返回的Json格式数据循环输出成table形式

    这段PHP代码查询数据库，获取数据列表，然后使用ThinkPHP的`ajaxReturn`方法将数据以Json格式返回给前端。 HTML部分则提供了一个基本的表格结构： ```html &lt;table class="table table-striped table-bordered ...

    bootstrap3+datatables+servlet+sqlite3后台分页增删改查DEMO

    在本项目中，Servlet承担了与后台数据库交互的角色，它处理来自Datatables的Ajax请求，执行SQL查询（如SELECT、INSERT、UPDATE、DELETE）来完成数据的增删改查操作，并将结果以JSON格式返回给前端。 SQLite3则是一...

    bootstrap Table服务端处理分页(后台是.net)

    `dataType` 设置为 `"json"`，表示我们期望从服务器接收到JSON格式的数据。`striped` 和 `undefinedText` 分别控制表格的隔行变色效果和未定义数据的默认显示文本。 `pagination` 设为 `true` 启用分页功能，`...

    bootstrap 表格

    7. **实时更新**：在保存数据并接收到服务器的确认后，应立即更新表格显示，以便用户看到他们的更改已生效。这可能涉及到重新加载表格数据或仅更新已更改的行。 8. **用户体验优化**：为了提升用户体验，可以添加...

    MVC5 BoostrapTable+分页+日期控件 Demo

    在控制器中，根据接收到的日期参数更新查询条件，并返回分页数据。最后，使用BootstrapTable的API（如`table.bootstrapTable('load', data)`）来动态更新表格内容。 在实际开发中，我们还需要考虑错误处理、验证...

    bootstrap.zip

    用户对表格的修改，比如添加、删除或更新行，可以实时反映到后台数据库中，实现数据的动态管理。 实现这一功能，通常需要后端开发的配合。后端可能使用诸如Node.js、Python的Django或Flask、Ruby on Rails、PHP的...

    bootstrap-table实现服务器分页的示例 （spring 后台）

    $('#' + tableId).bootstrapTable({ queryParams: function (params) { var param = { size: params.limit, page: (params.offset / params.limit), // 不需要+1 }; return param; }, sidePagination: ...

    Spring，Spring Data Jpa，freemarker，bootstrap实现的分页源代码

    在分页实现中，FreeMarker模板负责将后台服务返回的数据渲染成HTML页面。开发者可以在模板中使用控制结构和变量来显示分页链接，动态展示每页的内容。 **Bootstrap** 是一个流行的前端开发框架，提供了响应式布局和...

    Ajax无刷新Table分页例子

    3. **后端处理**：在服务器端（如PHP、Python、Node.js等），接收到请求后，根据传来的页码和每页条数查询数据库，返回相应的数据片段。 4. **响应处理**：在Ajax的success回调函数中，解析服务器返回的数据，动态...

Magicbox
Global site tag (gtag.js) - Google Analytics