复选框HTML

<th class="table-checkbox sorting_disabled" aria-label=" " style="width: 24px">
    <div id='emails_table_checker' class="checker">
        <span class="">
            <input class="group-checkable" type="checkbox">
        </span>
    </div>
</th>

JQuery的

$(document).ready(function ()
{
    var table = $('#emails_table');
    table.dataTable(
    {
        "aoColumns": [
            {   "sClass": "center",
                "mRender": function (data)
                {
                    if (data == '1')
                    {
                        return 
                        '<input type="checkbox" checked value="' + data + '">';
                    }
                    else if (data == '2')
                    {
                        return 
                        '<input type="checkbox" value="' + data + '">';
                    }
                },
              "bSortable": false },
            { "bSortable": true },
            { "bSortable": true },
            { "bSortable": true },
            { "bSortable": true },
        ],
        "pagelength": 10,
        "pagingType": "bootstrap_full_number",
        "language": 
        {
            "lengthMenu": "  _MENU_ records",
            "paginate": 
            {
                "previous":"Prev",
                "next": "Next",
                "last": "Last",
                "first": "First"
            }
        }
    });

    var checker = $("#emails_table_checker");
    checker.click(function()
    {
        if (checker_status)
        {
            checker_status = false;
            table.$('span').attr('class','checked');
        }
        else
        {
            checker_status = true;
            table.$('span').attr('class','');
        }
        return false;
    });
});

上面的代码以这样的方式呈现标题中的复选框;

当你点击它时，Tick永远不会出现。
右侧显示排序向上箭头。它对点击向下箭头作出反应，反之亦然。它不会调用排序功能。
点击任何其他列的头部会使箭头永久消失，直到页面刷新。

我希望刻度线显示出来并且箭头会消失，请有人帮忙。

Answer 1

我认为你禁止排序有点不对劲。手动将.sorting_disabled添加到<th>是没用的;对特定列禁用排序的正确方法是这样的（1.10.x）：

var dataTable = $('#example').dataTable({
   ...
   aoColumnDefs : [{
      orderable : false, aTargets : [0] //disable sorting for the 1st column
   }],
   order : [] //disable default sorting, eg sorting on 1st column  
});

演示 - ＆gt;的 http://jsfiddle.net/99h8u/

上一个答案中的问题是，即使关闭了此列的排序，默认情况下，数据表显然按第一列排序。

<强>更新即可。要调整列的宽度，正确的方法是使用aoColumnDefs或aoColumns，而不是在<th>（此处为上面的第一列）中将宽度设置为内联样式：< / p>

var dataTable = $('#example').dataTable({
   aoColumnDefs : [ {
       sWidth: '24px', bAutoWidth: false, bSortable : false, aTargets : [0]
   }]
});

如果您在列中有长字符串，而dataTables坚持更大的宽度，请添加此CSS（再次针对第一列）：

table.dataTable tr td:first-child  {
    word-wrap: break-word; 
    max-width: 24px;
    overflow-x: hidden;    
}

上面的演示，第一列强制24px宽度 - ＆gt;的 http://jsfiddle.net/97M94/

如何隐藏在复选框列上显示的排序箭头？

复选框HTML

JQuery的

1 个答案: