如何结合数据表信息文本和分页链接

Question

下一个（上一个）我可以更改数据表信息文本和分页按钮。但是如何组合这些部分并显示如下图所示？

这是我的代码，

let dt = $('#targetTable').DataTable({
        "order": [[1, "desc"]], 
        bRetrieve: true, 
        "language": { "info": "_START_ to _END_ of _TOTAL_ " }
    });

Answer 1

您可以为数据表编写自定义的分页插件，并使用DOM属性或CSS禁用/隐藏默认信息元素。

我创建了一个分页插件示例，其外观/行为与您描述的一样：

$.fn.dataTableExt.oPagination.customPagination = {
    "fnInit": function (oSettings, nPaging, fnCallbackDraw) {
        var nBtnFirst = document.createElement('button');
        var nBtnPrevious = document.createElement('button');
        var nBtnNext = document.createElement('button');
        var nBtnLast = document.createElement('button');
        var nInfo = document.createElement('span');
        
        nBtnFirst.className = "paginate_button first";
        nBtnFirst.textContent = "|<";
        
        nBtnPrevious.className = "paginate_button previous";
        nBtnPrevious.textContent = "<";
        
        nBtnNext.className = "paginate_button next";
        nBtnNext.textContent = ">";
        
        nBtnLast.className = "paginate_button last";
        nBtnLast.textContent = ">|";

        nInfo.id = oSettings.sTableId + '_info_2';
        nInfo.className = oSettings.oClasses.sInfo;
        $(nInfo).attr( 'role', 'status' );
        $(nInfo).attr( 'aria-live', 'polite' );

        if (oSettings.sTableId !== '') {
            nPaging.setAttribute('id', oSettings.sTableId + '_paginate');
        }
        
        nPaging.appendChild(nBtnFirst);
        nPaging.appendChild(nBtnPrevious);
        nPaging.appendChild(nInfo);
        nPaging.appendChild(nBtnNext);
        nPaging.appendChild(nBtnLast);
        
        $(nBtnFirst).click(function () {
            if( $(this).hasClass("disabled") )
                return;
            oSettings.oApi._fnPageChange(oSettings, "first");
            fnCallbackDraw(oSettings);
        }).bind('selectstart', function () { return false; });

        $(nBtnPrevious).click(function () {
            if( $(this).hasClass("disabled") )
                return;
            oSettings.oApi._fnPageChange(oSettings, "previous");
            fnCallbackDraw(oSettings);
        }).bind('selectstart', function () { return false; });
        
        $(nBtnNext).click(function () {
            if( $(this).hasClass("disabled") )
                return;
            oSettings.oApi._fnPageChange(oSettings, "next");
            fnCallbackDraw(oSettings);
        }).bind('selectstart', function () { return false; });
        
        $(nBtnLast).click(function () {
            if( $(this).hasClass("disabled") )
                return;
            oSettings.oApi._fnPageChange(oSettings, "last");
            fnCallbackDraw(oSettings);
        }).bind('selectstart', function () { return false; });

    },
    "fnUpdate": function (oSettings, fnCallbackDraw) {
        if (!oSettings.aanFeatures.p) {
            return;
        }
        let start = oSettings._iDisplayStart+1,
            end = oSettings.fnDisplayEnd(),
            max = oSettings.fnRecordsTotal();
        $('#' + oSettings.sTableId + '_info_2').html( start + ' to ' + end + ' of ' + max );
    }
};

let dt = $('#example').DataTable({
 "order": [[1, "desc"]], 
  bRetrieve: true, 
  "pagingType": "customPagination"
});

/* quick and dirty hide the default info-element */
#example_info { display: none; }

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>

<table id="example">
  <thead>
    <tr><th>Name</th><th>Description</th></tr>
  </thead>
  <tbody>
    <tr><td>Test-1</td><td>Test 1234</td></tr>
    <tr><td>Test-3</td><td>I dont know!</td></tr>
    <tr><td>Test-2</td><td>Another...</td></tr>
    <tr><td>Alpha-1</td><td>Apple Test</td></tr>
    <tr><td>Alpha-2</td><td>Banana Test</td></tr>
    <tr><td>Alpha-3</td><td>Coconut</td></tr>
    <tr><td>Beta-1</td><td>Beta</td></tr>
    <tr><td>Beta-2</td><td>Not Alpha</td></tr>
    <tr><td>Alpha-1</td><td>Apple Test</td></tr>
    <tr><td>Alpha-2</td><td>Banana Test</td></tr>
    <tr><td>Alpha-3</td><td>Coconut</td></tr>
    <tr><td>Beta-1</td><td>Beta</td></tr>
    <tr><td>Beta-2</td><td>Not Alpha</td></tr>
  </tbody>
</table>