dataTables中文排序以及加序号问题

因项目需要做个列表，采用的datatable插件，遇到两个问题，一：给表格增加序号，二：中文增加排序

一：增加序号

增加序号的方式有很多，（1）：

 columns: [
                    {
                        data: null,
                        render: function (data, type, row, meta) {
                            return meta.row + 1;
                        },
                        className: 'text-center'
                    }
       ]

(2):因本项目采用客户端模式下增加序号，考虑要给各个列增加排序（参考：http://datatables.club/blog/2016/07/10/add-index-for-table.html）

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th></th>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Salary</th>
        </tr>
    </thead>
</table>

 $(document).ready(function() {
        var t = $('#example').DataTable({
            "columns":[
                {"data":null},
                {"data":"Name"},
                {"data":"Position"},
                {"data":"Office"},
                {"data":"Age"},
                {"data":"Salary"}
            ],
            "columnDefs": [{
                "searchable": false,
                "orderable": false,
                "targets": 0
            }],
            "order": [[1, 'asc']]
        });
        t.on('order.dt search.dt',function() {
                    t.column(0, {
                        search: 'applied',
                        order: 'applied'
                    }).nodes().each(function(cell, i) {
                        cell.innerHTML = i + 1;
                    });
                }).draw();
    });

• columnDefs 这个里面配置的作用是，禁用第一列的搜索和排序。为什么？因为第一列是行号排序还搜索已经没有意义了
• order 这个配置项的作用是，设置默认的排序列为第二列。为什么？因为 DT 默认会设置第一列升序排列，既然已经是行号了那就没必要了，我们设置到第二列升序排列
• on 为 jQuery 里监听事件的方法，给元素绑定监听事件，这里监听了 order.dt 、search.dt 两个事件，意思是当排序和搜索后，重新生成行号
• t.column(0,{selector}).nodes() 这个的作用是获取第一列的 DOM 元素，接着用 each 方法遍历，把行号设置进去。这里 {selector} 为 DT 的高级应用，我下面会说到
• draw 最后一个重绘方法，生成序号后，重新绘制。DT 的每个操作，包括排序、过滤、翻页还是自己使用API操作这些操作或者是设置了数据都要再调用 draw 方法才行

通过上面这段基本的代码，在客户端模式下，行号自然就显示出来了

二：中文排序的问题

//添加中文排序
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是插件存放表格内容类型的数组
    // reg赋值的正则表达式，用来判断是否是中文字符
    // 返回值push到aTypes数组，排序时扫描该数组，'chinese'则调用上面两个方法。返回null默认是'string'
    jQuery.fn.dataTableExt.aTypes.push(function(sData) {
        var reg = /^[\u4e00-\u9fa5]{0,}$/;
        if (reg.test(sData)) {
            return 'chinese';
        }
        return null;
    });
}

注:

• x,y可能是数组也可能是字符串，若是数组则x[0]即可获取数据
• x,y若不是数组，则需要判断字符串的具体类型，有可能是"“、null等，这里我将这种类型的数据过滤成'-‘了(方法在下面会给出)，所以这里判断是否是’-‘,如果是，在判断的时候视其为最大，这里用'Z'来代替
• 该方法需要在onReady之前引入。

这样还有一个问题就是：这里的方法只会识别中文，所以如果有的列是空字符串或者null和中文在一列的时候等是进入不了不了这个方法的，那么我们就需要手动将这一列设置为中文，跳转验证这一步。

设置方法为：

在dataTables初始化的时候传入type：

$('#table').DataTable({
    columns: [{    //给需要加排序的中文列添加即可
        title: "test",
        type: 'chinese',//这里强制转换类型
        data: "fieldsName",
        render: function(data) {
            return formatTableData(data)
        }
    }],
});
function formatTableData(data) {
    switch (data) {
        case null:
        case "false":
        case "":
            return '-';
            break;
        case true:
            return '是';
            break;
        case false:
            return '否';
            break;
        default:
            return data;
            break;
    }
}

引入排序方法

   $(document).ready(function () {
                    addChieseAsc();
                     var t = $('#exampleTable').DataTable({});
        }
        )