提出问题:

bootstrap-table 可以根据ajax地址load的json数据。这个json数据一般就是数据库中查询的结果,而数据库中存放的数据一般不是用户友好的,比如数据表示一般使用简洁id或者英文,而将数据的具体定义放在其他位置。

举个例子:

表格1: ***,**** ,类型id

表格1数据达到几万行,而数据中,类型id是个数字,类型id的解释意义在其他表格中存放,一共只有三个类型。

如果我们直接载入表格1数据,那么在前端展示中,显示的类型id是一串数字,显然是不友好的。

解决这个问题的办法有以下几种:

1.在客户端定义对类型id的解释,某个id对应某个中文名称,这个对应关系实际就是数据库中的对应关系,但是由于这边类型只有几种,可以在代码中写死,不需要重新查询数据库。

优点:简单容易实现,不占用网络流量

缺点:代码写死,以后存在数据库中类型增删同时需要修改这部分代码。如果这样的代码一多,维护成为一件非常可怕的事情。

2.在服务端就将返回数据替换为显示的格式与意义。这个数据库查询时候直接获取,在服务器里面修改代码就可以实现

优点:客户端直接显示即可,简单

缺点:占用流量变大,一个字节的内容变为多个字节。

3.将类型id这种数据单独使用ajax查询获取数据,在客户端获取对应关系

优点:占用流量小,代码集中,具备自适应性来应对未来的数据改变

缺点:客户端需要增加一个ajax查询,由于该查询是的数据量非常小,也会很快。

综上所述:

我认为第三种方法最好,这个不但可以将表现与具体数据分隔开,使得展示的代码更加集中易于修改。并且占用网络流量也不多。

注意:

请求表现格式的代码不能直接放入data-formatter中,这样做的话,会导致每读一行都会请求表现数据,这个数据可以放在全局变量里面进行复用,或者放在jquery等闭包中。

使用bootstrap-table等自动使用ajax地址载入数据的插件的数据设计建议的更多相关文章

  1. bootstrap table 服务器端分页--ashx+ajax

    1.准备静态页面 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-T ...

  2. bootstrap table 分页只显示分页不显示总页数等数据

    搜了下没找到解决方案,就用CSS来解决了. 把paginationDetailHAlign:"right",使pagination-detail的class为.pull-right ...

  3. [前端插件]Bootstrap Table服务器分页与在线编辑应用总结

    先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据 ...

  4. 新的表格展示利器 Bootstrap Table

     1.bootstrap table简介及特征 Bootstrap Table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序.分 ...

  5. 新的表格展示利器 Bootstrap Table Ⅰ

     1.bootstrap table简介及特征 Bootstrap Table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序.分 ...

  6. BootStrap Table和Mybatis Plus实现服务端分页

    一.后台java代码(Mybatis Plus分页) (1)Mybatis Plus分页的配置,在mybatis的xml文件中增加如下配置(Mybatis Plus官方文档:http://baomid ...

  7. bootstrap table 保留翻页选中数据

    $(function () { $('#exampleTable').on('uncheck.bs.table check.bs.table check-all.bs.table uncheck-al ...

  8. C# Bootstrap table之 分页

    效果如图: 一.声明talbe <div class="container"> <table id="table" class="t ...

  9. [转]C# Bootstrap table之 分页

    本文转自:https://www.cnblogs.com/zhangjd/p/7895453.html 效果如图: 一.声明talbe <div class="container&qu ...

随机推荐

  1. vs2012安装qt5.5.1

    https://blog.csdn.net/a6513806/article/details/80098057

  2. DWR 3.0 入门示例教程

    DWR(Direct Web Remoting) DWR is a Java library that enables Java on the server and JavaScript in a b ...

  3. js实现水平伸缩菜单

    window.onload=function(){ var aA=document.getElementsByTagName('a'); for(var i=0; i<aA.length; i+ ...

  4. <<C++标准程序库>>中的STL简单学习笔记

    0. 内容为个人学习笔记, 仅供参考, 如有错漏, 欢迎指正! 1. STL中的所有组件都是由模板构成的, 所以其元素可以是任意型别的. 组件有: - 容器: 管理某类对象的集合. 不同的容器有各自的 ...

  5. 3.1.5 倒计时器:CountDownLatch

    package 第三章.倒计时器CountDownLatch; import java.util.concurrent.CountDownLatch; /** * Created by zzq on ...

  6. RF和GBDT的区别

    Random Forest ​采用bagging思想,即利用bootstrap抽样,得到若干个数据集,每个数据集都训练一颗树. 构建决策树时,每次分类节点时,并不是考虑全部特征,而是从特征候选集中选取 ...

  7. (转)UI设计实战篇——利用Bootstrap框架制作查询页面的界面

    原文地址:http://www.cnblogs.com/grenet/p/3413085.html Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺 ...

  8. JavaScript语言精粹 笔记04 数组

    数组1 数组字面量2 长度3 删除4 列举5 混淆的地方6 方法7 维度 数组1 数组字面量 var empty = []; var numbers = [ 'zero', 'one', 'two', ...

  9. 编写高质量代码改善C#程序的157个建议——建议123:程序集不必与命名空间同名

    建议123:程序集不必与命名空间同名 程序集一般会和命名空间同名,但这并不是必须的.事实上,不同名的命名空间和程序集是很常见的. 程序集表示的是一种物理上的分组,而命名空间是逻辑上的分组,两者没有必然 ...

  10. C#函数式程序设计之泛型(上)

    在面向对象语言中,我们可以编写一个元素为某个专用类型(可能需要为此创建一个ListElement)的List类,或者使用一个非常通用.允许添加任何类型元素的基类(在.NET中,首先想到的是System ...