網頁js實現篩選（網頁內容篩選）

本文目錄一覽：

• 1、關於用js篩選頁面數據
• 2、各位前輩怎麼用JS代碼實現篩選功能
• 3、JS 前端的篩選代碼
• 4、天貓的全部篩選功能怎麼做 js
• 5、如何用JS篩選文本框的內容
• 6、JS，京東上的和淘寶上的條件篩選功能是怎麼做的，如果知道能簡單說下實現原理嗎？

關於用js篩選頁面數據

你那個篩選數據是什麼意思？

var html=””;

for(var i=9;i13;i++)

{

html+=$(“.”+i).html();

}

各位前輩怎麼用JS代碼實現篩選功能

當然有啊

unction getSelectedText() {

if (window.getSelection) {

return window.getSelection().toString();

} else {

if (document.getSelection) {

return document.getSelection();

} else {

if (document.selection) {

return document.selection.createRange().text;

}

}

}

return “”;

}

JS 前端的篩選代碼

先給大家展示下效果圖，如果大家感覺效果不錯，請參考實現代碼：

因為這是我自己第一次動手用js寫分頁，寫的應該也不是很完美，有些公共的沒有抽取出來，但是用起來還是可以的，這塊代碼是可以把它當做公共的分頁去處理的，我就是用這塊代碼寫了兩個稍微不同一些的分頁！公共的代碼抽取的也差不多，主要就是ajax後台以及返回的值不同而已，只要把總頁碼的值獲取到，點擊首頁/下一頁等傳值正確的話，基本上分頁是不會出什麼問題的

網上確實有很多分頁的插件以及開源代碼，單本是一個後台開發猿，前台css等樣式還駕馭不住，所以就開始自己去寫了。其實這個分頁原理很簡單，就是用ajax往後台傳值(當前頁碼)，後台使用limit進行分頁。

廢話不多說，直接上代碼了！

註：本項目是全程使用js來寫的，前台的數據通過ajax進行獲取，然後再進行拼裝，動態載入到頁面。

1.先把上一頁，下一頁等的代碼附上(裡面的值都是偽值，下面會在js里進行重新賦值的！)

ul class=”page” id=”page”  li id=”shouye” class=”p-prev disabled”  a href=’javascript:indexpage(1);’首 頁/a  /li  li id=”shangyiye” class=”p-prev disabled”  a href=’javascript:indexpage(-1);’i/i上一頁/a  /li  li a id=”one” href=”javascript:void(0);” 1/a/li  lia id=”two” href=”javascript:void(0);” 2/a/li  lia id=”three” href=”javascript:void(0);” 3/a/li  li class=”more”a id=”five” href=”javascript:void(0);” …/a/li  lia id=”fore” href=”javascript:void(0);” 13855/a/li  li class=’p-next’  a href=’javascript:indexpage(-3);’ onclick=”jumpToPage(‘2′,’/goods/ajaxqueryGoodsList.do.html’,”,’goodsListContainer’,’13855′, listPageCallback);”下一頁i/i/a  /li  li id=”weiye” class=’p-next’  a href=’javascript:void(0);’ onclick=”indexpage(0);”尾 頁/a  /li  li class=”total”  span id=”span_number”共13855頁 到第input type=”text” id=”input_number” class=”page-txtbox” /頁  input name=”” value=”確定” type=”button” onclick=”jumpToPage(jQuery(‘#input_number’).val(),’/goods/ajaxqueryGoodsList.do.html’,”,’goodsListContainer’,’13855′, listPageCallback);” class=”page-btn”/  /span  /li  /ul  

2.首先在頁面放兩個隱藏域，一個是當前頁碼，一個是總頁碼，總頁碼是頁面載入完，從後台查詢出來後直接附上值的，當前頁碼是沒操作一個，就要對當前頁碼賦值

input id=”jiazai” type=”hidden” /input!– 當前頁碼 —  input id=”totalpage” type=”hidden” /input!– 總頁碼 —  

3.寫一個頁面載入完的function，給總頁碼和當前頁碼賦值

$(function(){  $(‘#jiazai’).val(1);//給當前頁碼進行賦值，默認為第一頁  ajaxfunction(page,arg,chipssort,”);//這個方法是抽取的ajax後台訪問的方法  });  

4.抽取的ajax方法，此頁面會用到好幾次這個方法，所有把它收取了出來，因為頁面的數據時通過ajax從後台獲取到的，後台返回的是一個List集合

//抽取ajax的方法  function ajaxfunction(page,arg,chipssort,fontval){  $.ajax({  type:’POST’,  url:’/admin/receptionchips/showlist’,//請求的url地址  data:{  page:page,  sort:arg,  chipssort:chipssort,  fontval:fontval  },  dataType:’json’,  contentType:’application/x-www-form-urlencoded; charset=utf-8′,  success:function(data){  //返回值在進行訪問抽取的方法，從後台返回  commonfunction(data);  }  });  }  

3.代碼看到這也不是很多，最後一個了

//抽取拼串的方法  function commonfunction(data){  $(‘#projectlist’).find(“li”).remove();  for (var i=0;idata.length;i++ )  {   /*****因為此頁面是動態載入的，這裡主要就是進行拼串，代碼也不少，就不漏出來占空間了*****/br  }br//開始是分頁的核心了  if(data.length0){  //設置頁碼  var pading = data[0].padingnum;//總頁碼  $(‘#totalpage’).val(pading);  var page = $(‘#jiazai’).val();//當前頁  $(‘#countpage’).html(“b id=’currentPageNo'”+page+”/b/”+pading+””);  $(‘#span_number’).html(“共”+pading+”頁 到第input type=’text’ id=’input_number’ class=’page-txtbox’ /頁input name=” value=’確定’ type=’button’ onclick=’indexpage(-2)’/goods/ajaxqueryGoodsList.do.html’,”,’goodsListContainer’,'”+pading+”‘, listPageCallback);’ class=’page-btn’/”)  }else{  $(‘#countpage’).html(“b id=’currentPageNo'”+0+”/b/”+0+””);  }  //設置分頁的底部 就是 首頁 1 2 3 4 5 6 尾頁  var pading = data[0].padingnum;//總頁碼href=”javascript:void(0);”  var nowpage = $(‘#jiazai’).val();//當前頁  //one two three five forebr//下面代碼看著是比較麻煩，但是也不難理解 全是一樣的代碼，只不過是加了些判斷  if(nowpage5 ){  $(‘#one’).text(1);  $(‘#one’).attr(‘href’,’javascript:pagenum(“‘+1+'”);’);  $(‘#two’).text(2);  $(‘#two’).attr(‘href’,’javascript:pagenum(“‘+(2)+'”);’);  $(‘#three’).text(3);  $(‘#three’).attr(‘href’,’javascript:pagenum(“‘+(3)+'”);’);  $(‘#five’).text(4);  $(‘#five’).attr(‘href’,’javascript:pagenum(“‘+(4)+'”);’);  $(‘#fore’).text(5);  $(‘#fore’).attr(‘href’,’javascript:pagenum(“‘+(5)+'”);’);  $(‘#five’).parent().show();  $(‘#fore’).parent().show();  }else{  //alert(“已經不是第五頁了”);  //設置中間的為當前頁  $(‘#one’).text(Number(nowpage)-2);  $(‘#one’).attr(‘href’,’javascript:indexpage(“‘+(Number(nowpage)-2)+'”);’);  $(‘#two’).text(Number(nowpage)-1);  $(‘#two’).attr(‘href’,’javascript:indexpage(“‘+(Number(nowpage)-1)+'”);’);  $(‘#three’).text(nowpage);  $(‘#three’).attr(‘href’,’javascript:indexpage(“‘+(nowpage)+'”);’);  $(‘#five’).parent().show();  $(‘#fore’).parent().show();  //判斷下一頁是否超過了總頁數  if(Number(nowpage)+1pading){  $(‘#five’).parent().hide();  $(‘#fore’).parent().hide();  }else{  $(‘#five’).parent().show();  $(‘#five’).text(Number(nowpage)+1);  $(‘#five’).attr(‘href’,’javascript:indexpage(“‘+(Number(nowpage)+1)+'”);’);  }  //判斷下一頁的第二頁是否超過了總頁數  if(Number(nowpage)+2pading){  $(‘#fore’).parent().hide();  }else{  $(‘#fore’).parent().show();  $(‘#fore’).text(Number(nowpage)+2);  $(‘#fore’).attr(‘href’,’javascript:indexpage(“‘+(Number(nowpage)+2)+'”);’);  }  }  //如果總頁數小於5，這塊代碼主要就是設置 1 2 3 4 5 這些的顯示和隱藏的  if(pading==0){  $(‘#one’).parent().hide();  $(‘#two’).parent().hide();  $(‘#three’).parent().hide();  $(‘#five’).parent().hide();  $(‘#fore’).parent().hide();  }else if(pading==1){  $(‘#shouye’).hide();  $(‘#weiye’).hide();  $(‘#one’).parent().hide();  $(‘#two’).parent().hide();  $(‘#three’).parent().hide();  $(‘#five’).parent().hide();  $(‘#fore’).parent().hide();  }else if(pading==2){  $(‘#one’).parent().show();  $(‘#two’).parent().show();  $(‘#three’).parent().hide();  $(‘#five’).parent().hide();  $(‘#fore’).parent().hide();  }else if(pading==3){  $(‘#one’).parent().show();  $(‘#two’).parent().show();  $(‘#three’).parent().show();  $(‘#five’).parent().hide();  $(‘#fore’).parent().hide();  }else if(pading==4){  $(‘#one’).parent().show();  $(‘#two’).parent().show();  $(‘#three’).parent().show();  $(‘#five’).parent().show();  $(‘#fore’).parent().hide();  }else{  $(‘#one’).parent().show();  $(‘#two’).parent().show();  $(‘#three’).parent().show();  $(‘#five’).parent().show();  $(‘#fore’).parent().show();  }  //設置高亮顯示的，就是是第一頁時，1亮，第二頁時 2亮  $(‘#page a’).each(function() {  $(this).parent().removeClass(“current”);  if($(this).text()==nowpage){  $(this).parent().addClass(“current”);  }  });  //分頁完返回頁面頂端  $(“html,body”).animate({scrollTop:0}, 500);  //最後，給當前頁碼加1  $(‘#jiazai’).val(Number(bianlaing)+Number(1));   }  

好了，到這裡分頁就完成了，如果你們需要使用的話，可能會話費一會去理解我的代碼，其實代碼不難，我是使用了兩個小時把它寫完的，只要一行一行代碼看，並且自己再加註釋，把這塊弄過去，不出半小時絕對搞定！

天貓的全部篩選功能怎麼做 js

js商品篩選功能的具體代碼步驟如下：

1、根據數據結構生成HTML結構（利用dom操作）。

2、獲取每一個li,給每一個li中每一個a標籤綁定事件處理函數。

3、點擊a標籤，把a標籤的內容添加在對象中，同時添加樣式。

4、根據對象存的屬性生成選擇則條件的HTML結構（按順序排列）。

5、點擊關閉選擇的條件，刪除數據，移除HTML結構，去除在其對應的li中的樣式。

如何用JS篩選文本框的內容

你敘述的還是不清楚。

這功能倒是很容易實現。你給單選框1一個 onchange事件，比如 onchange = “add(this)”

給單選框2一個 onchange事件，比如 onchange = “rel(this)”

function add(obj){

document.getElementById(“你要設定的文本框的ID”).value = obj.value;

}

function rel(obj){

document.getElementById(“你要設定的文本框的ID”).value = “”;

}

要是不同對應不同文本框，你就判斷一下。

JS，京東上的和淘寶上的條件篩選功能是怎麼做的，如果知道能簡單說下實現原理嗎？

您好：說一下我們自己商城的實現方式，最初我們用的都是伺服器控制項。首先先把所有的篩選條件載入到頁面上，在用戶點擊的時候因為都是伺服器控制項，所以每次都會回發，我們給每個控制項都有一個唯一的ID標識，這樣每次點擊後，把查詢條件拼接到sql中查詢出數據後，把當前點擊的篩選條件存到ViewState中，然後頁面刷新後去讀取這個ViewState的值。也就是你頁面上有幾類篩選條件就需要幾個ViewState值來存儲。

後來因為數據從後台回發到前台，百度抓取的時候是抓不到的，不利於商城的SEO優化。最後決定把所有的篩選條件都拼接到URL中進行傳值。這也是大多數網站採用的方式。就是舉個例子：查詢學生信息，篩選條件類型有，身高，體重，年齡。那麼篩選條件都有a標籤，連接是這樣a href=”/a這樣。點身高的時候先把連接中加上身高的的條件然後刷新頁面。這樣在後台直接request獲取值，然後查詢資料庫即可。為此我們也自己寫了一個根據傳入的篩選條件來返回不同url的實體類方法。很簡單。京東淘寶篩選也是刷新頁面的。

查詢完後，也是根據url中的值來鎖定哪個篩選條件來顯示選中狀態。