Jquery 如何组合datatable信息文本和分页链接

我可以更改datatable信息文本和分页按钮下一步，上一步。但如何组合这些部分并像下图那样显示呢

这是我的密码

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

---

您可以为datatables编写自定义分页插件，并使用DOM属性或css禁用/隐藏默认信息元素

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

$.fn.dataTableExt.oPagination.customPagination={
“fnInit”：函数（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=“首先分页按钮”；
nBtnFirst.textContent=“| |”；
nInfo.id=oSettings.sTableId+''u info_2'；
nInfo.className=oSettings.oClasses.sInfo；
$（nInfo.attr（'role'，'status'）；
$（nInfo.attr（'aria live'，'polite'）；
如果（oSettings.sTableId！=''）{
nPaging.setAttribute（'id'，oSettings.sTableId+'u paginate'）；
}
nPaging.appendChild（nBtnFirst）；
nPaging.appendChild（nBtnPrevious）；
nPaging.appendChild（nInfo）；
nPaging.appendChild（nBtnNext）；
nPaging.appendChild（nBtnLast）；
$（nBtnFirst）。单击（函数（）{
if（$（this）.hasClass（“已禁用”））
返回；
oSettings.oApi._fnPageChange（oSettings，“第一”）；
fnCallbackDraw（oSettings）；
}).bind（'selectstart'，函数（）{return false；}）；
$（nBtnPrevious）。单击（函数（）{
if（$（this）.hasClass（“已禁用”））
返回；
oSettings.oApi._fnPageChange（oSettings，“先前”）；
fnCallbackDraw（oSettings）；
}).bind（'selectstart'，函数（）{return false；}）；
$（nBtnNext）。单击（函数（）{
if（$（this）.hasClass（“已禁用”））
返回；
oSettings.oApi._fnPageChange（oSettings，“next”）；
fnCallbackDraw（oSettings）；
}).bind（'selectstart'，函数（）{return false；}）；
$（nBtnLast）。单击（函数（）{
if（$（this）.hasClass（“已禁用”））
返回；
oSettings.oApi._fnPageChange（oSettings，“last”）；
fnCallbackDraw（oSettings）；
}).bind（'selectstart'，函数（）{return false；}）；
},
“FNDUpdate”：函数（oSettings、fnCallbackDraw）{
如果（！oSettings.aanFeatures.p）{
返回；
}
让开始=设置。_i显示开始+1，
end=oSettings.fndDisplayEnd（），
max=oSettings.fnRecordsTotal（）；
$（“#”+oSettings.sTableId+“_info_2”）.html（从“+max”的“+start+”到“+end+”）；
}
};
设dt=$（'#示例'）.DataTable({
“订单”：[[1，“说明”]，
布雷特里夫：是的，
“分页类型”：“自定义分页”
});
/*快速隐藏默认信息元素*/
#示例信息{display:none；}

姓名描述
测试-1测试1234
我不知道！
测试-2另一个。。。
α-1苹果试验
α-2Banana试验
α-3Coconut
β-1β
β-2非α
α-1苹果试验
α-2Banana试验
α-3Coconut
β-1β
β-2非α
您可以为datatables编写自定义分页插件，并使用DOM属性或css禁用/隐藏默认信息元素

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


$.fn.dataTableExt.oPagination.customPagination={
“fnInit”：函数（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=“首先分页按钮”；
nBtnFirst.textContent=“| |”；
nInfo.id=oSettings.sTableId+''u info_2'；
nInfo.className=oSettings.oClasses.sInfo；
$（nInfo.attr（'role'，'status'）；
$（nInfo.attr（'aria live'，'polite'）；
如果（oSettings.sTableId！=''）{
nPaging.setAttribute（'id'，oSettings.sTableId+'u paginate'）；
}
nPaging.appendChild（nBtnFirst）；
nPaging.appendChild（nBtnPrevious）；
nPaging.appendChild（nInfo）；
nPaging.appendChild（nBtnNext）；
nPaging.appendChild（nBtnLast）；
$（nBtnFirst）。单击（函数（）{
if（$（this）.hasClass（“已禁用”））
返回；
oSettings.oApi._fnPageChange（oSettings，“第一”）；
fnCallbackDraw（oSettings）；
}).bind（'selectstart'，函数（）{return false；}）；
$（nBtnPrevious）。单击（函数（）{
if（$（this）.hasClass（“已禁用”））
返回；
oSettings.oApi._fnPageChange（oSettings，“先前”）；
fnCallbackDraw（oSettings）；
}).bind（'selectstart'，函数（）{return false；}）；
$（nBtnNext）。单击（函数（）{
if（$（this）.hasClass（“已禁用”））
返回；
oSettings.oApi._fnPageChange（oSettings，“next”）；
fnCallbackDraw（oSettings）；
}).bind（'selectstart'，函数（）{return false；}）；
$（nBtnLast）。单击（函数（）{
if（$（this）.hasClass（“已禁用”））
返回；
oSettings.oApi._fnPageChange（oSettings，“last”）；
fnCallbackDraw（oSettings）；
}).bind（'selectstart'，函数（）{return false；}）；
},
“FNDUpdate”：函数（oSettings、fnCallbackDraw）{