amazeui/datatables

jQuery DataTables 插件 Amaze UI 集成

Amaze UI DataTables

---

DataTables 插件 Amaze UI 集成，只修改了样式和默认显示语言，其他参数同官方版。

• 使用示例

使用说明：

1. 获取 Amaze UI DataTables

• 直接下载
• 使用 NPM: npm install amazeui-datatables

2. 在 Amaze UI 样式之后引入 DataTables 样式（dist目录下的 CSS）：

Amaze UI DataTables 依赖 Amaze UI 样式。

<link rel="stylesheet" href="path/to/amazeui.min.css"/>
<link rel="stylesheet" href="path/to/amazeui.datatables.css"/>

3. 在 jQuery 之后引入 DataTables 插件（dist目录下的 CSS）：

<script src="path/to/jquery.min.js"></script>
<script src="path/to/amazeui.datatables.min.js"></script>

4. 初始化 DataTables:

$(function() {
    $('#my-table').DataTable();
});

功能增强

扩展

• 固定表头：文档 | 下载
• 固定列：文档 | 下载
• 响应式表格

datatables's Issues

_fnAjaxDataSrc 函数返回 undefined

• https://github.com/amazeui/datatables/blob/master/dist/amazeui.datatables.js#L4953

• https://github.com/amazeui/datatables/blob/master/dist/amazeui.datatables.js#L7766

• https://github.com/amazeui/datatables/blob/master/dist/amazeui.datatables.js#L4328 这行估计也会出错，只是目前还没用上。

// 代码重现
$('#table').DataTable({
	ajax: {
		url: 'js/data/table.json'
	},
	responsive: true, // 响应式
	stateSave: false, // 状态保存,页码,搜索,排序等
	deferRender: true, // 异步创建行
	ordering: false,
	language: {
		info: '总计 _TOTAL_ 项数据'
	},
	aoColumns: [{
		mDataProp: 'id',
		fnCreatedCell: function(nTd, sData) {
			$(nTd).html('<input type="checkbox" class="my-checkbox" value="' + sData + '">');
		}
	}, {
		mDataProp: 'id',
		fnCreatedCell: function(nTd, sData, oData, iRow, iCol) {
			$(nTd).html(iRow + 1);
		}
	}, {
		mDataProp: 'name'
	},]
});

基本实例的数据源是什么？数据库吗？

支持mysql数据库吗？

排序的图标不显示，怎么回事？

在jquery后引入js文件，导致jquery的方法不能用，比如$.ajax

Uncaught TypeError: Cannot set property 'oLanguage' of undefined when working with requireJS

Uncaught TypeError: Cannot set property 'oLanguage' of undefined when working with requireJS !

Is there any proplem with my code?

define(['jquery','datatables'],function($){
//code here
}

样式问题

这个问题，怎么破....

行选中

行选中的样式有问题，好像只有奇数行才能加上样式，而且加上后鼠标移上去有没了。

AMD的引入方式报错

`require.config({

paths: {

    'jquery':                       'resources/jquery.min',

    'angular':                      'resources/angular/angular.min',
    'angular-ui-router':            'resources/angular/angular-ui-router.min',
    'angularAMD':                   'resources/angular/angularAMD.min',
    'ngload':                       'resources/angular/ngload.min',
    'angularAnimate':               'resources/angular/angular-animate',

    'amazeui':                      'resources/assets/js/amazeui.min',
    'amazeuitree':                  'resources/tree/amazeui.tree.min',
    // 'datatables':                   'resources/datatable/js/datatables.min',
    'am-datatables':                'resources/datatable/js/amazeui.datatables.min',
    'switch':                       'resources/switch/amazeui.switch.min',


    'application-configuration':    'base/application-configuration',
    'directive':                    'base/directive',
    'animation':                    'base/animation',
    'run':                          'base/run',
    
    'ckeditor':                     'resources/ckeditor/ckeditor'

},
map: {
    '*': {
        'css':                      'resources/requirejs/css.min'
    }
},
shim: {
    'angular':                      {exports: 'angular'},
    'jquery':                       ['angular'],
    'angular-ui-router':            ['angular'],
    'angularAMD':                   ['angular'],                    //依赖于angular
    'ngload':                       ['angularAMD'],                 //依赖于angularAMD
    'angularAnimate':               ['angular'],
    'amazeuitree':                  ['jquery','amazeui'],

    'am-datatables':['jquery','amazeui','css!resources/datatable/amazeui.datatables.min'],
    'switch':  ['jquery','amazeui','css!resources/switch/amazeui.switch'],

    'amazeui': [
        'jquery',
        'css!resources/assets/css/amazeui.min',
        'css!resources/assets/css/amazeui.custom',
        'css!resources/tree/amazeui.tree.min',
        'css!resources/assets/css/embed.default',
        'css!resources/assets/css/admin.css'

    ]
},
deps: ['run']

});
`

define( [ "angular", "angularAMD", "angular-ui-router", "angularAnimate", "amazeui", "amazeuitree", "datatables", "am-datatables", "switch" ], function (angular, angularAMD) {...}

在使用的过程中出现如下错误

整个插件的翻页效果还在，但是样式全部丢失了。
而只使用datatable 插件就不会有这个错误出现。这个配置还需要更改什么么。

当然，普通的引入是没问题的。

是否有计划提供cdn？

像http://cdn.amazeui.org/amazeui/2.7.2/css/amazeui.min.css一样

datatable在手机上展示，那效果....

我把datatable放在一个panel里面，如果将布局改为am-u-md-6，在pc端显示效果.......太坑

手机端看到的效果和这个类似.... 咋优化...

分页数据的BUG

@minwe 我发现了一个bug，不知道是怎么产生的。

另外我看DataTable官网已经更新版本了，是不是可以直接用新的版本进行替换？

兄台，排序有没有按数字序而不是字典序的方式啊？

我的表格第一栏显示主键。
一开始我导了6个数据在测试，等弄好之后实际导入了200多个数据，发现数据变成了：
1
10
100
...

吓得我赶紧改成了
00001
00002
....

暂时解决了问题，但有没有直接可以支持数字序的选项呢？

启用响应式的时候的BUG

为一个class绑定JS事件， 当这个Class被responsive隐藏到加号里面时候，事件无法触发

数字排序不正确

数字排序错误 如 1,11,21,2,5,6,23 排出来的是1/11/2/21/23/5/6

初始化的问题

如果在document ready的时候，装载和实例化datatable，页面放大和缩小会执行响应式的效果。

如果是在其他的事件执行的状态和实例化，貌似响应式的效果就消失了。如图：

Amaze UI 移植插件 DataTables 响应式 文字显示不全，如何解决？

Amaze UI 移植插件 DataTables 响应式 文字显示不全，如何解决？ 如下图：

这个控件后续还有更新计划么？

大部分的方法和说明都还没给出来，比如动态加载数据，动态查询绑定，列绑定等等。
还有常用的双击，单击事件

怎么实现默认显示所有的数据，不分页呢？