Warning: file_get_contents(/data/phpspider/zhask/data//catemap/5/ruby-on-rails-4/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
改变';分页类型';较小设备中的数据表选项(jQuery+;Bootstrap4)_Jquery_Html_Datatable_Responsive Design_Paging - Fatal编程技术网

改变';分页类型';较小设备中的数据表选项(jQuery+;Bootstrap4)

改变';分页类型';较小设备中的数据表选项(jQuery+;Bootstrap4),jquery,html,datatable,responsive-design,paging,Jquery,Html,Datatable,Responsive Design,Paging,我正在使用的是启用分页并显示带有页码的“下一页/上一页”按钮(1,2,3,4,5,…,10) 我正在尝试使用插件提供的选项,在较小的设备(小于768px)中将此选项更改为“下一个/上一个” 我尝试过使用响应式方法,但不起作用: responsive: { pagingType: "simple" } 我可以使用以下css来解决问题,但我不想生成这些按钮 内部DOM .dataTables_paginate ul.pagination .paginate_button:not(.previ

我正在使用的是启用分页并显示带有页码的“下一页/上一页”按钮(1,2,3,4,5,…,10)

我正在尝试使用插件提供的选项,在较小的设备(小于768px)中将此选项更改为“下一个/上一个”

我尝试过使用响应式方法,但不起作用:

responsive: {
  pagingType: "simple"
}

我可以使用以下css来解决问题,但我不想生成这些按钮 内部DOM

.dataTables_paginate ul.pagination .paginate_button:not(.previous):not(.next){    
  display: none;    
}
$(文档).ready(函数(){
$(“#数据表”)。数据表({
搜索:假,
信息:错,
长度变化:错误,
回答:是的,
自动宽度:false,
语言:{
蛋白石:{
sNext:“下一个”,
sPrevious:“以前的”
}
},
i显示长度:5,
响应:{
分页类型:“简单”
}
});
});

数据表分页
名称
类型
方法
日期
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019

对于Datatables+引导,请使用CSS媒体查询:

@media (max-width: 767px){
    .pagination .paginate_button:not(.previous):not(.next){
        display: none;
    }
}
对于无引导的Datatble WO,请使用:

@media (max-width: 767px){
    .dataTables_paginate span{
        display: none;
    }
}
代码:

$(文档).ready(函数(){
$(“#数据表”)。数据表({
搜索:假,
信息:错,
长度变化:错误,
回答:是的,
自动宽度:false,
语言:{
蛋白石:{
sNext:“下一个”,
sPrevious:“以前的”
}
},
i显示长度:5,
响应:{
分页类型:“简单”
}
});
});
@介质(最大宽度:767px){
.pagination.paginate_按钮:不(.previous):不(.next){
显示:无;
}
}

数据表分页
名称
类型
方法
日期
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
名字
类型1
M123456
10/10/2019
.dataTables_paginate ul.pagination .paginate_button:not(.previous):not(.next){
  display: none;
}
pagingType: $(window).width() < 768 ? "simple" : "simple_numbers"