问题解决:使用JqGrid实现列表分页,翻页图标无法显示

简介: 问题解决:使用JqGrid实现列表分页,翻页图标无法显示

问题:使用JqGrid实现列表翻页,翻页图片无法显示,但是图标没法显示,功能是完善的,只是图标看不到。

如图:


image.png


问题原因:

Bootstrap4中已经不再使用glyphicon字体(收费):


image.png


所以无法显示,你可以将Bootstrap4换低版本,比如换成3,也可以自己把3里面的字体整合进来。


这里我们可以使用一种比较简单的办法,就是先找到一些可以用的图标,然后通过JS替换掉这些用不了的图标即可,图标可以在这里找:


https://www.thinkcmf.com/font/font_awesome/icons.html#directional


代码参考:


$(function () {
  $("#first_jqGridPager").html("<span class=\"oi oi-media-step-backward\"><i class=\"fa fa-step-backward\" aria-hidden=\"true\"></i></span>");
  $("#prev_jqGridPager").html("<span class=\"oi oi-caret-left\"><i class=\"fa fa-backward\" aria-hidden=\"true\"></i></span>");
  $("#next_jqGridPager").html("<span class=\"oi oi-caret-right\"><i class=\"fa fa-forward\" aria-hidden=\"true\"></i></span>");
  $("#last_jqGridPager").html("<span class=\"oi oi-media-step-forward\"><i class=\"fa fa-step-forward\" aria-hidden=\"true\"></i></span>");
});


其他解决方案参考(未测试):

1、在BootStrap4.x中使用jqGrid5.4遇到的分页图标丢失问题

相关文章
|
7月前
|
JavaScript 前端开发 Java
67jqGrid - 搜索操作工具栏
67jqGrid - 搜索操作工具栏
29 0
|
4月前
|
前端开发
使用element-ui中的table时,当有多选又有翻页功能时,点击翻页后之前选中的数据丢失
使用element-ui中的table时,当有多选又有翻页功能时,点击翻页后之前选中的数据丢失
|
4月前
|
缓存 JavaScript 前端开发
vue + element Table的数据多选,多页选择数据回显,分页记录保存选中的数据。
vue + element Table的数据多选,多页选择数据回显,分页记录保存选中的数据。
|
5月前
|
前端开发
Element常用组件—表格、表单、对话框和分页工具条
Element常用组件—表格、表单、对话框和分页工具条
42 0
|
6月前
|
JavaScript 前端开发
JS实现分页功能(单选按钮、全选按钮、跳转页面)
JS实现分页功能(单选按钮、全选按钮、跳转页面)
40 0
|
6月前
|
JavaScript
ElementUI下拉框选择后不显示值
ElementUI下拉框选择后不显示值
|
6月前
|
前端开发
uniapp checkbox样式失效,选中框选中按钮不显示
uniapp checkbox样式失效,选中框选中按钮不显示
91 0
|
9月前
|
前端开发
上传图片组件的悬停显示删除等操作遮罩层
上传图片组件的悬停显示删除等操作遮罩层
Vant3—— 点击对应的name名称跳转到下一页对应的tab栏的name的位置
点击对应的name名称跳转到下一页对应的tab栏的name的位置
145 0
|
设计模式 存储 前端开发
分页复选设计的坑
什么是分页复选设计呢?