datatables

dataTables是个强大的JQuery表格插件，但是不支持中文排序，这个比较令人头疼。 这里针对几种常见的数据格式写了一个dataTables的中文排序方法： //添加中文排序 function addChieseAsc() { jQuery.fn.dataTableExt.oSort['chinese-asc'] = function(x, y) { x = (x instanceof Array) ? x[0] : x == '-' ? 'z' : x; //z的ASCII码值最大 y = (y instanceof Array) ? y[0] : y == '-' ? 'z' : y; //javascript自带的中文比较函数，具体用法可自行查阅了解 return x.localeCompare(y); }; jQuery.fn.dataTableExt.oSort['chinese-desc'] = function(x, y) { x = (x instanceof Array) ? x[0] : x == '-' ? 'z' : x; y = (y instanceof Array) ? y[0] : y == '-' ? 'z' : y; return y.localeCompare(x); }; // aTypes是插件存放表格内容类型的数组 //

这几天改bug中发现的一些问题，小结一下。从简单到复杂逐个讲。 angular datatable实质上是对jquery库的包装，但包装后不太好用，定制功能比较麻烦。 1. 基本用法 最简单的用法，大致就是template里： <table datatable [dtOptions]="dtOptions"> component里： dtOptions: DataTables.Settings; 最基本的就这两句，其他代码都不用改，table就自然有了搜索，按列排序等功能。 2. css 如果要用分页功能，一是dtOptions需配置一下： dtOptions: DataTables.Settings = {paging: true}; 二是需要在angular.json里加上css路径，不然分页栏排版错乱： "styles": [ "node_modules/datatables.net-dt/css/jquery.dataTables.css", 3. 去掉（不显示）上方每页显示N条记录的下拉选择框 dtOptions配置： dtOptions: DataTables.Settings = {lengthChange: false;} 4.避免和已有的css冲突 原来的table已经定义了一套css，加上datatable属性后，原有的css被破坏了。我用个笨办法

在对datatables做后端数据填充的时候，遇到一个，翻页问题。在多次操作翻页后，总是提示加载中。反了很多博客没有找到原因。 经过测试，发现原来自己坑了自己。 代码如下： datatables : { init : function (table_id,ajax_url,columns,buttons,searchParams) { if(null == columns || undefined == columns){ columns = []; } if(null == buttons || undefined == buttons){ buttons = []; } var $t_table = $("#" + table_id); var $api_table = $t_table.dataTable({ language: { "sProcessing": "处理中...", "sLengthMenu": "每页 _MENU_ 项", "sZeroRecords": "没有匹配结果", "sInfo": "当前显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项。", "sInfoEmpty": "当前显示第 0 至 0 项，共 0 项", "sInfoFiltered": "(由 _MAX_ 项结果过滤)", "sInfoPostFix": "",

今天介绍汇总一下datatables。 网址： www.datatables.net 公司CMS内容资讯站的后台管理界面用了大量的table来管理数据，试用了之后，感觉挺不错，推荐一下。 先上一个基本的效果图. （图片太宽了，换了另一个模板） 介绍一下这个demo的实现。 首先是引用 js+css。 js有4个，①jquery，②bootstrap3，③datatables的js，④datatables对应bootstrap样式时用的。 为了说明问题，就不放bundle里面了。 <script src="~/Scripts/jquery-1.10.2.js"></script> <script src="~/Scripts/bootstrap.js"></script> <script src="~/Content/datatables/js/jquery.dataTables.js"></script> <script src="~/Content/datatables/js/dataTables.bootstrap.js"></script> 然后是css。 有2个，①bootstrap3，②datatables对应bootstrap样式（要用这个替换datatables默认的样式，否则会出现右下角的分页样式margin很大的情况。） <link href="~/Content