提出问题:

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. linux系统中的单引号和双引号

    一.为什么用quoting 前面说到,命令行在内容上主要由literal(一般文字)和meta(元字符)组成,而meta又由IFS.CR和其他字符组成(如=,$, > 等),通常这些原元字符都有 ...

  2. 访问tomcat出现java.lang.IllegalStateException No output folder错误解决方法

    访问tomcat出现java.lang.IllegalStateException: No output folder错误解决方法 问题:tomcat分为安装版和解压缩版,解压缩版如果解压到安装盘,在 ...

  3. 【原创】cython and python for kenlm

    未经允许不可转载 Kenlm相关知识 Kenlm下载地址 kenlm中文版本训练语言模型 如何使用kenlm训练出来的模型C++版本 关于Kenlm模块的使用及C++源码说明 加载Kenlm模块命令 ...

  4. hra控件自动绑定

    1.前台js代码 $.ajax({ type: "post", url: 'AlmMarketScenarioDetailManage.aspx?_method=queryPane ...

  5. Java中比较容易混淆的知识点

    1.  equals()  和  ==  运算符 - equals是方法, 而==是运算符(当然也可以说是广义上的方法, 或者最终都是调用方法). - equals() 是从Object类中继承来的, ...

  6. CodeForces 342A Xenia and Divisors (水题)

    题意:给定 n 个数(小于等于7),让你把它分成 m 组,每组有三个数,且满足,a < b < c,并且 a 能整除 b,b 能整除 c. 析:对于这个题,因为题目说了是不大于7的,那么一 ...

  7. Word2013文章如何直接发布到CSDN博客

    目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...

  8. 编写高质量代码改善C#程序的157个建议——建议134:有条件地使用前缀

    建议134:有条件地使用前缀 在.NET的设计规范中,不建议使用前缀.但是,即便是微软自己依然广泛的使用这前缀. 最典型的前缀是m_,这种命名一方面是考虑到历史沿革中的习惯问题,另一方面也许我们确实有 ...

  9. SOAP协议初级指南 (一)

    SOAP(Simple Object Access Protocal) 技术有助于实现大量异构程序和平台之间的互操作性,从而使存在的应用能够被广泛的用户所访问.SOAP是把成熟的基于HTTP的WEB技 ...

  10. C++ 调用C++写的类库的2种方法之一(隐式链接)

    一:创建C++ DLL类库,名称:Dll1 1.Dll1.h /*#ifndef Dll_API #else #define Dll_API _declspec(dllimport) #endif * ...