js分页高亮问题
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js分页高亮问题相关的知识，希望对你有一定的参考价值。
下面是个js分页的代码，很好用，可惜点击当前页的时候不能高亮，请大神帮忙：
<style type="text/css">
#frameContent
width:500px;/*调整显示区的宽*/
height:200px;/*调整显示区的高*/
font-size:14px;
line-height:20px;
border:1px solid #000000;
overflow-pageINdex:hidden;
overflow-y:hidden;word-break:break-all;
</style>
<div id="frameContent">
<p>北京奥运会颁奖礼仪服装共十六款。其中男装一款作为升旗手制服。女装十五款分为五个系列，每一系列分别按照嘉宾引导员、运动员引导员和托盘员的不同职能设计了三个不同款式。在奥运会的302场和残奥会的472场颁奖仪式上，这五个系列的礼服将分别出现在不同的场馆及比赛中。</p>
<p> “青花瓷”系列使用在国家游泳中心水立方、顺义水上公园和青岛等所有水上项目的颁奖仪式中。设计灵感取自世界闻名的中国青花瓷器。中国传统乱针绣的运用形象逼真地再现了青花瓷的晕染效果。鱼尾裙的廓形设计凸显了中国女性的柔美曲线。</p>
<p> 宝蓝系列使用在体操、室内球类比赛和击剑等项目的颁奖现场。服装采用温润典雅的宝蓝色作为礼服主色，腰间饰有采用传统盘金绣制作的腰封，图案选用最具中国传统文化审美意趣和美好愿望的吉祥纹样——江山海牙纹、牡丹花纹，凸显了鲜明的中国特色和民族风格。同时也向全世界人民展示了中国最高超的刺绣工艺。中式的立领配以西式的肩部设计尽现中国女性落落大方的高贵气质。</p>
<p> 国槐绿系列丝缎礼服使用在自行车、射击、现代五项等项目的颁奖仪式上。礼服寓意蓬勃朝气的生命和郁郁葱葱的环境，体现了与自然和谐发展的美好愿望及坚守“绿色奥运”的决心。立体银线绣制的吉祥牡丹和契合女性柔美曲线的卷曲花纹，更显身段的婀娜多姿和东方女性的恬静气质。</p>
</div>
<br>
<div id="pages" style="font-size:12px;"></div>
<script language="javascript">
var obj = document.getElementById("frameContent");//获取内容层
var pages = document.getElementById("pages");//获取翻页层
window.onload = function()//重写窗体加载的事件
var allpages = Math.ceil(parseInt(obj.scrollHeight)/parseInt(obj. offsetHeight));//获取页面数量
pages.innerhtml = "<b>共"+allpages+"页</b> ";//输出页面数量
for (var i=1;i<=allpages;i++)
pages.innerHTML += "<a href=\"javascript:showPage('"+i+"');\">第"+i+"页</a> ";
//循环输出第几页
function showPage(pageINdex)
obj.scrollTop=(pageINdex-1)*parseInt(obj.offsetHeight);//根据高度，输出指定的页
</script>
/**
*由于你的代码很多，而我只更改了JavaScript部分，所以我只发JS部分了。
*
*另外，我改动的地方都做了注释，具体详见：
*/
var obj = document.getElementById("frameContent");//获取内容层
var pages = document.getElementById("pages");//获取翻页层
window.onload = function()//重写窗体加载的事件
var allpages = Math.ceil(parseInt(obj.scrollHeight)/parseInt(obj. offsetHeight));//获取页面数量
pages.innerHTML = "<b>共"+allpages+"页</b> ";//输出页面数量
for (var i=1;i<=allpages;i++)
//这里对初始分页做了判断，如果是第一次循环，则将第一页高亮，因为是JS分页程序也决定了网页开启后为第一页：
pages.innerHTML += "<a href=\\"javascript:showPage('"+i+"');\\" style=\\"color:" + (i==1?"#F00":"#06C") + "\\">第"+i+"页</a> ";
//循环输出第几页
function showPage(pageINdex)
obj.scrollTop=(pageINdex-1)*parseInt(obj.offsetHeight);//根据高度，输出指定的页
//下面我做了点击事件的判断，点击了哪个，哪个高亮，其余的变回原色：
var as = pages.getElementsByTagName('a');
for(var i=0; i<as.length; i++)
as[i].style.color = i+1 == pageINdex ? '#F00' : '#06C';
</script>追问
好的，辛苦了，我测试下
追答OK，如果测试通过，还请采纳。
本回答被提问者采纳Elasticsearch 带中文分词的全文检索(分页+高亮返回)
一.全文搜索介绍
Full text queries 全文搜索主要有以下几种类型：
1.1 匹配查询（match query）
QueryBuilder qb = matchQuery(
"name", //field 字段
"kimchy elasticsearch" // text
);DSL 查询语句：
GET /_search
"query":
"match" :
"message" : "this is a test"
1.2 多字段查询（multi_match query）
可以用来对多个字段的版本进行匹配查询
QueryBuilder qb = multiMatchQuery(
"kimchy elasticsearch", //text
"user", "message" //fields 多个字段
);DSL查询语句：
GET /_search
"query":
"multi_match" :
"query": "this is a test",
"fields": [ "subject", "message" ]
1.3 常用术语查询（common_terms query）
可以对一些比较专业的偏门词语进行的更加专业的查询
QueryBuilder qb = commonTermsQuery(
"name", //field 字段
"kimchy"); // value
DSL查询语句：
GET /_search
"query":
"common":
"body":
"query": "this is bonsai cool",
"cutoff_frequency": 0.001
1.4 查询语句查询（query_string query）
与lucene查询语句的语法结合的更加紧密的一种查询，允许你在一个查询语句中使用多个特殊条件关键字（如：AND|OR|NOT ）对多个字段进行查询，这种查询仅限专家用户去使用。
QueryBuilder qb = queryStringQuery("+kimchy -elasticsearch"); //textDSL查询语句：
GET /_search
"query":
"query_string" :
"default_field" : "content",
"query" : "this AND that OR thus"
以上四种是全文搜索可以用到的查询方式，但是一般使用多字段查询（multi_match query）比较多，这里重点写下第二种方式的使用。
二.使用multi_match query的方式实现全文多字段的匹配查询
2.1 检索服务
实现一个关键字分词匹配多个字段，分页查询，命中字段高亮显示
private <T> SearchDto<T> getResult(ShipQueryDto shipQueryDto, String indexName, Class<T> clazz) throws IOException, IllegalAccessException
SearchRequest searchRequest = new SearchRequest();
searchRequest.indices(indexName);
SearchSourceBuilder sourceBuilder = new SearchSourceBuilder();
/* 高亮查询 */
HighlightBuilder highlightBuilder = new HighlightBuilder();
highlightBuilder.numOfFragments(0); /*长度*/
highlightBuilder.preTags("<span style='color:red;'>");
highlightBuilder.postTags("</span>");
highlightBuilder.highlighterType("plain");
for (String name : EsSmartIndexHelper.classMapMap.get(clazz).keySet())
highlightBuilder.field(name).requireFieldMatch(false);
sourceBuilder.highlighter(highlightBuilder);
BoolQueryBuilder boolQueryBuilder = QueryBuilders.boolQuery();
if(StringUtils.isNotEmpty(shipQueryDto.getKeys()))
boolQueryBuilder.must(QueryBuilders.multiMatchQuery(shipQueryDto.getKeys()).fields(EsSmartIndexHelper.classMapMap.get(clazz)).type(MultiMatchQueryBuilder.Type.CROSS_FIELDS)
// .minimumShouldMatch("70%")
//使用最细粒度分词搜索
.analyzer("ik_max_word").operator(Operator.OR)
);
sourceBuilder.query(boolQueryBuilder);
// 分页
Integer from = (shipQueryDto.getPageNum()-1) * shipQueryDto.getPageSize();
sourceBuilder.from(from);
sourceBuilder.size(shipQueryDto.getPageSize());
sourceBuilder.trackTotalHits(true);
searchRequest.source(sourceBuilder);
log.error("查询的DSL语句： " + searchRequest.source().toString());
SearchResponse searchRes = restHighLevelClient.search(searchRequest, RequestOptions.DEFAULT);
log.error("返回原始数据 ： " + searchRes);
SearchHit[] hits = searchRes.getHits().getHits();
List<T> searchShipCbgkDtos = new ArrayList<>();
for (SearchHit hit : hits)
String json = hit.getSourceAsString();
T shipDto = JSONObject.parseObject(json, clazz);
//获取高亮字段
Map<String, HighlightField> highlightFields = hit.getHighlightFields();
if(CollectionUtil.isNotEmpty(highlightFields))
//获取class子类的字段
Field[] fields =clazz.getDeclaredFields();
//获取class继承父类的字段
Field[] fields1 = clazz.getSuperclass().getDeclaredFields();
//字段高亮处理
for (Field field : fields1)
field.setAccessible(true);
if (highlightFields.containsKey(field.getName()))
HighlightField highlightField = highlightFields.get(field.getName());
Text[] fragments = highlightField.fragments();
StringBuilder text = new StringBuilder();
for (Text fragment : fragments)
text.append(fragment.toString());
field.set(shipDto, text.toString());
for (Field field : fields)
field.setAccessible(true);
if (highlightFields.containsKey(field.getName()))
HighlightField highlightField = highlightFields.get(field.getName());
Text[] fragments = highlightField.fragments();
StringBuilder text = new StringBuilder();
for (Text fragment : fragments)
text.append(fragment.toString());
field.set(shipDto, text.toString());
searchShipCbgkDtos.add(shipDto);
SearchDto<T> searchDto = new SearchDto<>();
searchDto.setTotal(searchRes.getHits().getTotalHits().value);
searchDto.setSearchShips(searchShipCbgkDtos);
return searchDto;
@Override
public SearchDto<SearchShipCbgkDto> searchShip(ShipQueryDto shipQueryDto) throws IOException, IllegalAccessException
return getResult(shipQueryDto, EsIndex.INDEX_SEAT_SEARCH_SHIP_CBGK.getStatus(), SearchShipCbgkDto.class);
import lombok.Data;
import java.util.List;
/**
* 搜索返回实体
* @param <T>
*/
@Data
public class SearchDto<T>
/** 该库数量 */
private Long total;
/** 该库返回列表 */
private List<T> searchShips;
import java.util.HashMap;
import java.util.Map;
/**
* 全文搜索匹配的字段和权重
*/
public class EsSmartIndexHelper
public static Map<String, Float> shipCbgkfields = new HashMap<String, Float>();
public static HashMap<Class<? extends BaseSearchDto>, Map<String, Float>> classMapMap = new HashMap<Class<? extends BaseSearchDto>, Map<String, Float>>();
static
//船舶库
classMapMap.put(SearchShipCbgkDto.class, shipCbgkfields);
shipCbgkfields.put("shipName", 2.5f);
// "shipId",
shipCbgkfields.put("shipRegistryPort", 1.8f);
// "shipOwnerId",
shipCbgkfields.put("shipOwnerName", 1.5f);
shipCbgkfields.put("shipOwnerSex", 1f);
shipCbgkfields.put("shipOwnerTel", 1f);
shipCbgkfields.put("shipOwnerIdNumber", 1.1f);
shipCbgkfields.put("deptId", 1f);
shipCbgkfields.put("createTime", 1f);
shipCbgkfields.put("bdsTerminalNo", 1.3f);
shipCbgkfields.put("mmsi", 1.3f);
2.2 检索的DSL语句
Get /index/queryShip?keys=琼海口渔&pageNum=1&pageSize=10GET index_test_search_ship/_search
"from": 0,
"size": 20,
"query":
"bool":
"must": [
"multi_match":
"query": "琼海口渔",
"fields": ["bdsTerminalNo^1.3", "createTime^1.0", "deptId^1.0", "mmsi^1.3", "shipName^2.5", "shipOwnerIdNumber^1.1", "shipOwnerName^1.5", "shipOwnerSex^1.0", "shipOwnerTel^1.0", "shipRegistryPort^1.8"],
"type": "cross_fields",
"operator": "OR",
"analyzer": "ik_max_word",
"slop": 0,
"prefix_length": 0,
"max_expansions": 50,
"zero_terms_query": "NONE",
"auto_generate_synonyms_phrase_query": true,
"fuzzy_transpositions": true,
"boost": 1.0
],
"adjust_pure_negative": true,
"boost": 1.0
,
"track_total_hits": 2147483647,
"highlight":
"pre_tags": ["<span style='color:red;'>"],
"post_tags": ["</span>"],
"number_of_fragments": 0,
"type": "plain",
"require_field_match": false,
"fields":
"shipOwnerName": ,
"shipOwnerTel": ,
"createTime": ,
"mmsi": ,
"bdsTerminalNo": ,
"deptId": ,
"shipName": ,
"shipOwnerSex": ,
"shipOwnerIdNumber": ,
"shipRegistryPort":
2.3 返回的原始JSON数据
"took" : 4,
"timed_out" : false,
"_shards" :
"total" : 1,
"successful" : 1,
"skipped" : 0,
"failed" : 0
,
"hits" :
"total" :
"value" : 20,
"relation" : "eq"
,
"max_score" : 7.7624564,
"hits" : [
"_index" : "index_test_search_ship",
"_type" : "_doc",
"_id" : "bpMhcYQB4gQEvltnaqX-",
"_score" : 7.7624564,
"_source" :
"shipId" : "01",
"shipName" : "琼海口渔",
"shipOwnerName" : "李宁",
"shipOwnerTel" : "15173934187",
"shipOwnerIdNumber" : "430525199408136134",
"fullText" : "01 解决12345 时代 15173934187 430525199408136134"
,
"highlight" :
"shipName" : [
"<span style='color:red;'>琼海口渔</span>"
]
,
"_index" : "index_test_search_ship",
"_type" : "_doc",
"_id" : "b5MhcYQB4gQEvltnbaUM",
"_score" : 7.7624564,
"_source" :
"shipId" : "01",
"shipName" : "琼海口渔",
"shipOwnerName" : "李宁",
"shipOwnerTel" : "15173934187",
"shipOwnerIdNumber" : "430525199408136134",
"fullText" : "01 解决12345 时代 15173934187 430525199408136134"
,
"highlight" :
"shipName" : [
"<span style='color:red;'>琼海口渔</span>"
]
,
"_index" : "index_test_search_ship",
"_type" : "_doc",
"_id" : "U5PBb4QB4gQEvltnIKV-",
"_score" : 7.0790462,
"_source" :
"shipId" : "01",
"shipName" : "013234琼海口渔",
"shipOwnerName" : "李宁",
"shipOwnerTel" : "15173934187",
"shipOwnerIdNumber" : "430525199408136134",
"fullText" : "01 解决12345 时代 15173934187 430525199408136134"
,
"highlight" :
"shipName" : [
"013234<span style='color:red;'>琼海口渔</span>"
]
,
"_index" : "index_test_search_ship",
"_type" : "_doc",
"_id" : "VJPEb4QB4gQEvltnm6Uz",
"_score" : 7.0790462,
"_source" :
"shipId" : "01",
"shipName" : "013913琼海口渔",
"shipOwnerName" : "李宁",
"shipOwnerTel" : "15173934187",
"shipOwnerIdNumber" : "430525199408136134",
"fullText" : "01 解决12345 时代 15173934187 430525199408136134"
,
"highlight" :
"shipName" : [
"013913<span style='color:red;'>琼海口渔</span>"
]
,
"_index" : "index_test_search_ship",
"_type" : "_doc",
"_id" : "bZMhcYQB4gQEvltnQKVb",
"_score" : 7.0790462,
"_source" :
"shipId" : "01",
"shipName" : "琼海口渔013",
"shipOwnerName" : "",
"shipOwnerTel" : "15173934187",
"shipOwnerIdNumber" : "430525199408136134",
"fullText" : "01 解决12345 时代 15173934187 430525199408136134"
,
"highlight" :
"shipName" : [
"<span style='color:red;'>琼海口渔</span>013"
]
,
"_index" : "index_test_search_ship",
"_type" : "_doc",
"_id" : "a5MccYQB4gQEvltnY6Ur",
"_score" : 7.0790462,
"_source" :
"shipId" : "01",
"shipName" : "琼海口渔013",
"shipOwnerName" : "李宁",
"shipOwnerTel" : "15173934187",
"shipOwnerIdNumber" : "430525199408136134",
"fullText" : "01 解决12345 时代 15173934187 430525199408136134"
,
"highlight" :
"shipName" : [
"<span style='color:red;'>琼海口渔</span>013"
]
,
"_index" : "index_test_search_ship",
"_type" : "_doc",
"_id" : "bJMccYQB4gQEvltnZaV1",
"_score" : 7.0790462,
"_source" :
"shipId" : "01",
"shipName" : "琼海口渔013",
"shipOwnerName" : "李宁",
"shipOwnerTel" : "15173934187",
"shipOwnerIdNumber" : "430525199408136134",
"fullText" : "01 解决12345 时代 15173934187 430525199408136134"
,
"highlight" :
"shipName" : [
"<span style='color:red;'>琼海口渔</span>013"
]
,
"_index" : "index_test_search_ship",
"_type" : "_doc",
"_id" : "VZPbb4QB4gQEvltnraU6",
"_score" : 6.506234,
"_source" :
"shipId" : "01",
"shipName" : "013913琼海口渔",
"shipOwnerName" : "013913琼海口渔",
"shipOwnerTel" : "15173934187",
"shipOwnerIdNumber" : "430525199408136134",
"fullText" : "01 解决12345 时代 15173934187 430525199408136134"
,
"highlight" :
"shipOwnerName" : [
"013913<span style='color:red;'>琼海口渔</span>"
],
"shipName" : [
"013913<span style='color:red;'>琼海口渔</span>"
]
,
"_index" : "index_test_search_ship",
"_type" : "_doc",
"_id" : "apMWcYQB4gQEvltnT6Vt",
"_score" : 6.019184,
"_source" :
"shipId" : "01",
"shipName" : "琼海口渔013 李宁",
"shipOwnerName" : "12341",
"shipOwnerTel" : "15173934187",
"shipOwnerIdNumber" : "430525199408136134",
"fullText" : "01 解决12345 时代 15173934187 430525199408136134"
,
"highlight" :
"shipName" : [
"<span style='color:red;'>琼海口渔</span>013 李宁"
]
,
"_index" : "index_test_search_ship",
"_type" : "_doc",
"_id" : "cpNRcYQB4gQEvltnQ6Xw",
"_score" : 6.019184,
"_source" :
"shipId" : "01",
"shipName" : "琼海口渔013 李宁",
"shipOwnerName" : "李宁",
"shipOwnerTel" : "15173934187",
"shipOwnerIdNumber" : "430525199408136134",
"fullText" : "01 解决12345 时代 15173934187 430525199408136134"
,
"highlight" :
"shipName" : [
"<span style='color:red;'>琼海口渔</span>013 李宁"
]
]
2.4 接收格式化后返回的接口数据
"code": "SUCCESS",
"businessCode": "0",
"message": "操作成功",
"data":
"total": 20,
"searchShips": [
"shipId": "01",
"shipName": "<span style='color:red;'>琼海口渔</span>",
"shipRegistryPort": null,
"shipOwnerId": null,
"shipOwnerName": "李宁",
"shipOwnerSex": null,
"shipOwnerTel": "15173934187",
"shipOwnerIdNumber": "430525199408136134",
"deptId": null,
"createTime": null,
"bdsTerminalNo": null,
"mmsi": null
,
"shipId": "01",
"shipName": "<span style='color:red;'>琼海口渔</span>",
"shipRegistryPort": null,
"shipOwnerId": null,
"shipOwnerName": "李宁",
"shipOwnerSex": null,
"shipOwnerTel": "15173934187",
"shipOwnerIdNumber": "430525199408136134",
"deptId": null,
"createTime": null,
"bdsTerminalNo": null,
"mmsi": null
,
"shipId": "01",
"shipName": "013234<span style='color:red;'>琼海口渔</span>",
"shipRegistryPort": null,
"shipOwnerId": null,
"shipOwnerName": "李宁",
"shipOwnerSex": null,
"shipOwnerTel": "15173934187",
"shipOwnerIdNumber": "430525199408136134",
"deptId": null,
"createTime": null,
"bdsTerminalNo": null,
"mmsi": null
,
"shipId": "01",
"shipName": "013913<span style='color:red;'>琼海口渔</span>",
"shipRegistryPort": null,
"shipOwnerId": null,
"shipOwnerName": "李宁",
"shipOwnerSex": null,
"shipOwnerTel": "15173934187",
"shipOwnerIdNumber": "430525199408136134",
"deptId": null,
"createTime": null,
"bdsTerminalNo": null,
"mmsi": null
,
"shipId": "01",
"shipName": "<span style='color:red;'>琼海口渔</span>013",
"shipRegistryPort": null,
"shipOwnerId": null,
"shipOwnerName": "",
"shipOwnerSex": null,
"shipOwnerTel": "15173934187",
"shipOwnerIdNumber": "430525199408136134",
"deptId": null,
"createTime": null,
"bdsTerminalNo": null,
"mmsi": null
,
"shipId": "01",
"shipName": "<span style='color:red;'>琼海口渔</span>013",
"shipRegistryPort": null,
"shipOwnerId": null,
"shipOwnerName": "李宁",
"shipOwnerSex": null,
"shipOwnerTel": "15173934187",
"shipOwnerIdNumber": "430525199408136134",
"deptId": null,
"createTime": null,
"bdsTerminalNo": null,
"mmsi": null
,
"shipId": "01",
"shipName": "<span style='color:red;'>琼海口渔</span>013",
"shipRegistryPort": null,
"shipOwnerId": null,
"shipOwnerName": "李宁",
"shipOwnerSex": null,
"shipOwnerTel": "15173934187",
"shipOwnerIdNumber": "430525199408136134",
"deptId": null,
"createTime": null,
"bdsTerminalNo": null,
"mmsi": null
,
"shipId": "01",
"shipName": "013913<span style='color:red;'>琼海口渔</span>",
"shipRegistryPort": null,
"shipOwnerId": null,
"shipOwnerName": "013913<span style='color:red;'>琼海口渔</span>",
"shipOwnerSex": null,
"shipOwnerTel": "15173934187",
"shipOwnerIdNumber": "430525199408136134",
"deptId": null,
"createTime": null,
"bdsTerminalNo": null,
"mmsi": null
,
"shipId": "01",
"shipName": "<span style='color:red;'>琼海口渔</span>013 李宁",
"shipRegistryPort": null,
"shipOwnerId": null,
"shipOwnerName": "12341",
"shipOwnerSex": null,
"shipOwnerTel": "15173934187",
"shipOwnerIdNumber": "430525199408136134",
"deptId": null,
"createTime": null,
"bdsTerminalNo": null,
"mmsi": null
,
"shipId": "01",
"shipName": "<span style='color:red;'>琼海口渔</span>013 李宁",
"shipRegistryPort": null,
"shipOwnerId": null,
"shipOwnerName": "李宁",
"shipOwnerSex": null,
"shipOwnerTel": "15173934187",
"shipOwnerIdNumber": "430525199408136134",
"deptId": null,
"createTime": null,
"bdsTerminalNo": null,
"mmsi": null
]
可以看出，返回的字段，凡是命中关键词分词其中一个的都做高亮处理了。
以上是关于js分页高亮问题的主要内容，如果未能解决你的问题，请参考以下文章
SpringBoot+ElasticSearch 实现模糊查询，批量CRUD，排序，分页，高亮
SpringBoot整合ElasticSearch实现模糊查询，批量CRUD，排序，分页，高亮
SpringBoot整合ElasticSearch实现模糊查询，排序，分页，高亮
Springboot整合Elasticsearch7，分页高亮查询