如何在表标题列-Datatable旁边显示排序指示?

时间:2019-06-27 16:26:37

标签: javascript jquery html-table datatable

我有一个数据表。

我无法基于表标题对其进行排序,但是我想在表标题列旁边添加一些指示,例如上下箭头。

有没有办法在CSS或JS中达到这一目标?

这是我现在要进行的设置。

<script src="https://cdn.datatables.net/plug-ins/1.10.10/features/searchHighlight/dataTables.searchHighlight.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://bartaz.github.io/sandbox.js/jquery.highlight.js"></script>




<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.bootstrap.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/buttons/1.4.2/js/buttons.flash.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/buttons/1.4.2/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/buttons/1.4.2/js/buttons.print.min.js"></script>





<script type="text/javascript">

    $('.sysEventTable').DataTable( {
        "bLengthChange": false,
        "orderCellsTop": true,
        "bFilter": true,
        "Info": false,
        "bSort": true,
        "bPaginate": false,
        "searchHighlight": true,
        "dom": '<"pull-right"B><"pull-right"f><"pull-right"l>tip',
        "buttons": ['copy','csv','pdf','excel','print']
    } );

    $('#myInputTextField').keyup(function(){
        $('.sysEventTable').DataTable().search($(this).val()).draw();
    });


</script>

0 个答案:

没有答案