FAQs(常见问题列表)整理 #6

Open
occultskyrong opened this Issue Jul 18, 2016 · 4 comments

Projects

None yet

2 participants

@occultskyrong
occultskyrong commented Jul 18, 2016 edited

FAQs(常见问题列表)整理

勿忘初心,方得始终

为便于存档管理和分享备用,特建立此列表来维护FAQs。

用于整理常见的问题列表,区别于中文网的 FAQs

初步考虑收集来自QQ群的问题。欢迎大家贡献~


别问我是谁,请叫我雷锋

PS:

  • 多数互联网公司招聘时,会参考你git上contributions的数量,来确定你是否是一个喜欢新鲜事物的极客,并且是一个分享者。所以一个比较好的repositories是值得大家、社区来维护和分享的。希望大家积极参与。
  • github支持markdown,md逐渐成为一种主流的文档结构,便于大家来写各种文档(api文档、说明文档、项目文档等等),就连gitbook也支持并建议使用markdown进行写书,所以为了自己、为了社区,多贡献自己的知识。
@occultskyrong
occultskyrong commented Jul 18, 2016 edited

angular-datatables

一个比较好的表格树(treegird)的例子:
代码和效果
直接看结果

非datatables tree js

如何给表格添加checkbox

常见的错误提示

  • Cannot call method ’fnSetData‘ of undefined
    • 原因:表格中有class为hidden的列,使得内容部分的列数多于表头
  • $(...).dataTable is not a function
    • 原因:检查DT js 有没有引入,看控制台有无报错,比如404类似错误
  • $("#example").dataTable({...}) 和 $("#example").DataTable({...}) 的区别
    • 1.10.x版本后,有两种初始化的写法, $().dataTable() 返回的是一个jQuery实例, $().DataTable() 返回的是Datatables的api实例, 如果在使用过程中出现某某方法不存在不支持之类的,一般都是由于是用第一种方法初始化dt,用返回的对象去调用DataTables 的 api方法,所以报错误。 dt的api实例和jquery可以互转 ,jquery转api:dt.api();api转jquery:dt.to$(); 详细参考 api手册
  • Cannot read property 'aDataSort' of undefined
@ssy341
Owner
ssy341 commented Jul 19, 2016 edited

🔴 小伙伴们经常提的问题归纳(扩展)


怎么冻结列,冻结表头


怎么指定跳转到页数?


搜索条件 && 或者 || [search("a b")]?


自定义返回数据格式 (dataSrc)

@occultskyrong
occultskyrong commented Jul 19, 2016 edited

🔴 小伙伴们经常提的问题归纳(高级)


DataTable 单元格合并


DataTable 跨页选择(服务器客户端通用)


DataTables 动态列问题

参考 #4


DataTables 行内编辑

参考 行内编辑例子


DataTables 服务器模式


后台异常,如何显示服务器返回的自定义错误,而不是弹出报错

$.fn.dataTable.ext.errMode = function( settings, tn, msg){
//打印msg,和tn来判断,进了这个方法都是ajax走了error才会到这里来
}
//绑定xhr事件
table.on('xhr.dt',
    function (e, settings, json, xhr) {
        console.log(xhr)
        if (xhr.status == 200) {
            //自己的代码
        } else {
            //自己的代码
        }

    });

DataTables布局即 dom 选项的使用 参考1 参考2

  • dom的具体参数说明
  • dom和language中参数配置的结合,来显示合适的分页、翻页信息
  • dt与bootstrap的栅格的结合(通过栅格来控制相对宽度,以适应多分辨率下table的浏览)
  • dom中某个组件的扩展:
    • 跳转到第?页
    • 一些按钮的样式附加,根据id来写css优化样式
@ssy341
Owner
ssy341 commented Jul 27, 2016 edited

🔴 小伙伴们经常提的问题归纳(初级)


如何检查自己使用的DT是什么版本?

$.fn.dataTable.versionCheck()


DataTables参数名有些混乱了,为什么?


DataTables数据来源

  • dom数据
  • jquery ajax获取数据交给dt处理
  • DataTables自有的取数方式

DataTables 滚动条

ps:开启滚动条后,DT会把thead和tbody分为两个table来显示,如果发现有两个表头或者是列和表头对应不齐,大多数情况是因为css冲突导致,建议把其他css先去掉,排除法找到冲突的css。关于表头缩在一起的问题可以参考 #9 获取能有所启发


DataTables 选中行

  • 选择单行 参考
  • 选择多行 参考
  • 跨页选择
  • 获取选中行的值(每个单元格或者一整行,包含隐藏列) 参考 table.row('.selected').data() 即为一整行的值 table.row('.selected').data().id 获取这一行每个单元格的值
  • 添加序号

DataTables单元格渲染

  • checkbox/redio/button 参考
  • 内容替换 - 1/0 替换成 是/否、url替换成可跳转的a标签或者img 参考
  • 内容格式化 - 时间戳改为日期格式、内容太长不换行 参考
  • 数字优化显示 参考

DataTables rowspan 和 colspan

  • 复杂表头 实例1
    实例2(ps:不能在js里配置复杂表头)
  • 合并行,合并列

如何保持当前页的状态刷新数据

var dt = $("#tableid").DataTable({……}); 
//再需要刷新的地方调用下面这个方法
dt.ajax.reload(null,false)

var dt = $("#tableid").DataTable({……}); 
//再需重绘的地方调用下面这个方法
dt.draw(false);

@ssy341 ssy341 added the 置顶 label Aug 8, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment