前端及開發文章及欣賞 - 設計每日一貼---北京蘭亭妙微/UI設計公司

<address id="ttjl9"></address>

<noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>

<form id="ttjl9"></form>

<em id="ttjl9"><span id="ttjl9"></span></em>

<address id="ttjl9"></address>

<noframes id="ttjl9"><form id="ttjl9"></form>

首頁

062021-8

jquery取點擊位置是table中的第幾行第幾列

$('table tr td').click(
  function()
  {
   alert( $(this).parent().parent().find("tr").index($(this).parent()[0]));//第幾行
   alert($(this).index());//第幾列
  }
);

$('table tr td').click(
  function()
  {
   var i = $(this).parent().parent().find("tr").index($(this).parent()[0]);//第幾行
   alert($("table:eq(0) tr:eq("+i+") td:eq(0)").text());//取點擊行第一列的值
  }
);

分類: JavaScript

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：博客園

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(2177)

062021-8

jquery、js獲取table,遍歷輸出tr中各個td的內容。

首先，依賴jquery..

復制代碼

1 $('#btntb').click(function(){ 2 $('#tab tr').each(function(i){ // 遍歷 tr 3 $(this).children('td').each(function(j){ // 遍歷 tr 的各個 td 4 alert("第"+(i+1)+"行，第"+(j+1)+"個td的值："+$(this).text()+"。"); 5  }); 6  }); 7 });

復制代碼

js的方法

復制代碼

var tb = document.getElementById('tab'); // table 的 id var rows = tb.rows; // 獲取表格所有行 for(var i = 0; i<rows.length; i++ ){ for(var j = 0; j<rows[i].cells.length; j++ ){ // 遍歷該行的 td alert("第"+(i+1)+"行，第"+(j+1)+"個td的值："+rows[i].cells[j].innerHTML+"。"); // 輸出每個td的內容  }
}

復制代碼

Html代碼

復制代碼

<div align="center"> <table id="tab" border="1" align="center"> <tr> <td>西瓜</td> <td>橙</td> </tr> <tr> <td>芒果</td> <td>桔子</td> </tr> <tr> <td>奇異果</td> <td>葡萄</td> <td>西柚</td> </tr> </table> <br> <button id="btntb">遍歷table</button> </div>

復制代碼

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：博客園

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(2464)

052021-8

jq 變量轉字符串_JS中將一個值轉換為字符串的3種方法

1.value.toString()

2."" + value

3.String(value)

第一種方法存在的問題是,它不能把null和undefined轉換為字符串.還有第二種和第三種方法,這兩種方法的效果基本一樣.

""+value: 使用加法運算符配合一個空字符串可以把任意值轉換為字符串,我覺得這種方法代碼的可讀性很差,但相對String(value)來,還是有一些人更喜歡用這種轉換方式.

String(value): 這種方法可讀性更好,唯一的問題是,這種函數調用可能會迷惑一些人,尤其是那些熟悉Java的程序員,因為String同時也是一個構造函數.要注意的是它作為普通函數和作為構造函數時的表現完全不同

其他：

a. 要把一個數字轉換為字符串，只要給它添加一個空的字符串即可：

var n = 100;

var n_as_string = n + "";

b. 要讓數字更加顯式地轉換為字符串,可以使用String()函數:

var string_value = String(number);

c. 使用toString()方法:

string_value = number.toString();

Number對象的(基本的數字轉換為Number對象，以便可以調用這個方法)toString()方法有一個可選的參數，該參數用來指定轉換的基數。如果不指定這個參數，轉換會以10為基數進行。然而，也可以按照其他的基數(2到36之間的數)來轉換數字。

var n = 17;

binary_string = n.toString(2); // Evaluates to "10001"

octal_string = "0" + n.toString(8); // Evaluates to "021"

hex_string = "0x" + n.toString(16); // Evaluates to "0x11"

d. toFixed()方法把一個數字轉換為字符串，并且顯示小數點后的指定的位數。它不使用指數表示法。

var n = 123456.789;

n.toFixed(0); // "123457"

n.toFixed(1); // "123456.8"

e. toExponential()使用指數表示法把一個數字轉換為字符串，小數點前面有1位數，而小數點后面有特定的位數。

var n = 123456.789;

n.toExponential(1); // "1.2e+5"

n.toExponential(3); // "1.235e+5"

f. toPrecision()使用指定的有意義的位數來顯示一個數字，如果有意義的位數還不夠顯示數字的整個整數部分，它就使用指數表示法。

var n = 123456.789;

n.toPrecision(4); // "1.235e+5"

n.toPrecision(7); // "123456.8"

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：博客園

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(1966)

052021-8

jquery遍歷table的tr獲取td的值

html代碼：

復制代碼

 1 <tbody id="history_income_list">  2 <tr>  3 <td align="center"><input type="text" class="input-s input-w input-hs"></td>  4 <td align="center"><input type="text" class="input-s input-w input-hs"></td>  5 <td align="center"><input type="text" class="input-s input-w input-hs"></td>  6 <td align="center"><a class="" onclick="history_income_del(this);" href="###">刪除</a></td>  7 </tr>  8 <tr>  9 <td align="center"><input type="text" class="input-s input-w input-hs"></td> 10 <td align="center"><input type="text" class="input-s input-w input-hs"></td> 11 <td align="center"><input type="text" class="input-s input-w input-hs"></td> 12 <td align="center"><a class="" href="###">刪除</a></td> 13 </tr> 14 <tr> 15 <td align="center"><input type="text" class="input-s input-w input-hs"></td> 16 <td align="center"><input type="text" class="input-s input-w input-hs"></td> 17 <td align="center"><input type="text" class="input-s input-w input-hs"></td> 18 <td align="center"><a class="" href="###">刪除</a></td> 19 </tr> 20 </tbody> 21

復制代碼

方法一：

復制代碼

var trList = $("#history_income_list").children("tr") for (var i=0;i<trList.length;i++) { var tdArr = trList.eq(i).find("td"); var history_income_type = tdArr.eq(0).find('input').val();//收入類別 var history_income_money = tdArr.eq(1).find('input').val();//收入金額 var history_income_remark = tdArr.eq(2).find('input').val();// 備注  alert(history_income_type);
        alert(history_income_money);
        alert(history_income_remark);
    }

復制代碼

方法二：

復制代碼

$("#history_income_list").find("tr").each(function(){ var tdArr = $(this).children(); var history_income_type = tdArr.eq(0).find('input').val();//收入類別 var history_income_money = tdArr.eq(1).find('input').val();//收入金額 var history_income_remark = tdArr.eq(2).find('input').val();// 備注  alert(history_income_type);
        alert(history_income_money);
        alert(history_income_remark);

    });

復制代碼

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：博客園

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(2050)

052021-8

jquery中checkbox反復沒反應問題解決辦法

jquery1.9以后，checkbox的選中用attr就有問題，第一次能選中，第二次選不中，要換成prop來設置屬性。

1,問題重現

代碼如下

復制代碼

<html>
<body>
<input type="checkbox" name="items" value="test" id='test' />test

<button class='selected'>選中</button>
<button class='unselected'>不選中</button>
</body>

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    $('.selected').click(function(){
        $('#test').attr('checked','checked');
    });
    $('.unselected').click(function(){
        $('#test').removeAttr('checked');
    });
});
</script>
</html>

在這里有一點要注意，第一次選中后，用開發者工具，可以看到，checkbox有checked='checked'屬性，第二次，點了，但是選不中，還是有checked='checked'

2,解決辦法

代碼如下	復制代碼
<script type="text/javascript"> $(function(){ $('.selected').click(function(){ $('#test').prop('checked',true); }); $('.unselected').click(function(){ $('#test').prop('checked',false); }); }); </script>

轉載于:https://my.oschina.net/china008/blog/407350

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：博客園

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(2470)

052021-8

怎么使用jquery判斷一個元素是否含有一個指定的類（class）

在jQuery中可以使用2種方法來判斷一個元素是否包含一個確定的類(class)。兩種方法有著相同的功能。2種方法如下：（個人喜歡用hasClass()）

1. hasClass(‘classname’)

2. is(‘.classname’)

以下是一個div元素是否包含一個redColor的例子：

1. 使用is(‘.classname’)的方法

$('div').is('.redColor')

2. 使用hasClass(‘classname’)的方法(注意jquery的低版本可能是hasClass(‘.classname’))

$('div').hasClass('redColor')

以下是檢測一個元素是否含有一個redColor類的例子，含有時，則把其類變為blueColor。

<html>

<head>

<styletype="text/css">

  .redColor {

        background:red;

  .blueColor {

        background:blue;

</style>

<scripttype="text/javascript"src="jquery-1.3.2.min.js"></script>

</head>

<body>

  <h1>jQuery check if an element has a certain class</h1>

  <divclass="redColor">This is a div tag with class name of "redColor"</div>

<p>

  <buttonid="isTest">is('.redColor')</button>

  <buttonid="hasClassTest">hasClass('.redColor')</button>

  <buttonid="reset">reset</button>

  </p>

<scripttype="text/javascript">

    $("#isTest").click(function () {

          if($('div').is('.redColor')){

                $('div').addClass('blueColor');

});

    $("#hasClassTest").click(function () {

          if($('div').hasClass('redColor')){

                $('div').addClass('blueColor');

});

        $("#reset").click(function () {

          location.reload();

});

</script>

</body>

</html>

初始效果：

點擊is('.redColor')后的效果：

點擊hasClass('redColor')的效果與點擊is('.redColor')后的效果相同，點擊reset的效果與初始效果相同。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：博客園

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(3211)

042021-8

占滿DIV剩余高度的三種方法

第一種，老套路，浮動大法

代碼：

效果圖：

綠色DIV占滿了外層DIV

第二種：calc CSS計算

代碼：

這里在類名為div2的DOM外又加了一層div，主要就是為了說明，如果利用calc(100% - 50px);這種模式，那么這個DIV的父元素必須指定高度，可以是具體值，也可以是百分比，特別是dom結構嵌套很深的時候，特別好用。

效果圖：

第三種，彈性盒子




    

        

            

            

        

        

            
                <!DOCTYPE html>
            

        

    

    

        

            

            

        

        

            
                <html lang="en">
            

        

    

    

        

            

            

        

        

            
                <head>
            

        

    

    

        

            

            

        

        

            
                <meta charset="UTF-8">
            

        

    

    

        

            

            

        

        

            
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
            

        

    

    

        

            

            

        

        

            
                <meta http-equiv="X-UA-Compatible" content="ie=edge">
            

        

    

    

        

            

            

        

        

            
                <title>Document</title>
            

        

    

    

        

            

            

        

        

            
                </head>
            

        

    

    

        

            

            

        

        

            
                <style>
            

        

    

    

        

            

            

        

        

            
                *{
            

        

    

    

        

            

            

        

        

            
                margin:0;
            

        

    

    

        

            

            

        

        

            
                padding:0;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                .parent{
            

        

    

    

        

            

            

        

        

            
                width:100vw;
            

        

    

    

        

            

            

        

        

            
                height:100vh;
            

        

    

    

        

            

            

        

        

            
                display:flex;
            

        

    

    

        

            

            

        

        

            
                flex-flow:column nowrap;
            

        

    

    

        

            

            

        

        

            
                overflow:hidden;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                .a{
            

        

    

    

        

            

            

        

        

            
                height:50px;
            

        

    

    

        

            

            

        

        

            
                background:red;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                .b{
            

        

    

    

        

            

            

        

        

            
                flex:1;
            

        

    

    

        

            

            

        

        

            
                background:green;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                </style>
            

        

    

    

        

            

            

        

        

            
                <body>
            

        

    

    

        

            

            

        

        

            
                <div class="parent">
            

        

    

    

        

            

            

        

        

            
                <div class="a"></div>
            

        

    

    

        

            

            

        

        

            
                <div class="b"></div>
            

        

    

    

        

            

            

        

        

            
                </div>
            

        

    

    

        

            

            

        

        

            
                </body>
            

        

    

    

        

            

            

        

        

            
                </html>

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：博客園

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(4485)

042021-8

jquery判斷元素是否隱藏的多種方法

這篇文章主要介紹了jquery判斷元素是否隱藏的多種方法,本文總結了多種判斷方法實例,需要的朋友可以參考下

第一種：使用CSS屬性

復制代碼代碼如下:

        
var display =$('#id').css('display');

if(display == 'none'){

   alert("被你發現了，我是隱藏的啦！");

}

第二種：使用jquery內置選擇器

假設我們頁面有這么個標簽,

復制代碼代碼如下:

        <div id="test">

<p>僅僅是測試所用</p>

</div>

那么,我們可以用以下語句來判斷id為"test"的標簽是否隱藏:

復制代碼代碼如下:

if($("#test").is(":hidden")){...} //前提是已經將jQuery的庫導進來了

這樣,我們就能夠很簡單地判斷一個元素是否隱藏,并根據其狀態來設置動畫,比如:

復制代碼代碼如下:

        
if($("#test").is(":hidden")){

       $("#test").show();    //如果元素為隱藏,則將它顯現

}else{

      $("#test").hide();     //如果元素為顯現,則將其隱藏

}

jQuery判斷元素是否顯示是否隱藏

復制代碼代碼如下:

var node=$('#id');

第一種寫法

復制代碼代碼如下:

if(node.is(':hidden')){　　//如果node是隱藏的則顯示node元素，否則隱藏

node.show();

}else{

node.hide();

}

第二種寫法

復制代碼代碼如下:

if(!node.is(':visible')){　　//如果node是隱藏的則顯示node元素，否則隱藏

node.show();

}else{

node.hide();

}

if(node.is(':visible')){　　//如果node是顯示的則隱藏node元素，否則顯示

node.hide();

}else{

node.show();

}

jQuery判斷對象是否顯示或隱藏

Js代碼

復制代碼代碼如下:

        
// jQuery("#tanchuBg").css("display") 

// jQuery("#tanchuBg").is(":visible") 

// jQuery("#tanchuBg").is(":hidden")

Js代碼

復制代碼代碼如下:

        
$(element).is(":visible") // Checks for display:[none|block], ignores visible:[true|false]

Js代碼

復制代碼代碼如下:

        
$('element:hidden') 

$('element:visible')

Js代碼

復制代碼代碼如下:

        
$(".item").each(function() 

{ 

    if ($(this).css("visibility") == "hidden") 

    { 

        // handle non visible state 

    } 

    else 

    { 

        // handle visible state 

    } 

})

Js代碼

復制代碼代碼如下:

        
ar isVisible = $('#myDiv').is(':visible'); 

var isHidden = $('#myDiv').is(':hidden');

Js代碼

復制代碼代碼如下:

        
if( $(this).css("display") == 'none' ){ 

    /* your code here*/ 

} 

else{ 

    /*  alternate logic   */ 

}

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：博客園

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(6070)

302021-7

前端Datatables自定義事件（監聽Datatables插件一些常見的事件動作）

今天開發項目的時候，用Datatables插件做前端分頁列表，想在列表發生翻頁、排序、搜索、改變單頁顯示數據條數這些行為的時候做一些其他的操作，看了半天Datatables官網終于找到可以監測到這些事件發生方法：


        

            

                

                    

                    

                

                

                    
                        $('#table')
                    

                

            

            

                

                    

                    

                

                

                    
                        .on( 'order.dt', function () {
                    

                

            

            

                

                    

                    

                

                

                    
                        console.log( '排序事件' );
                    

                

            

            

                

                    

                    

                

                

                    
                        } )
                    

                

            

            

                

                    

                    

                

                

                    
                        .on( 'search.dt', function () {
                    

                

            

            

                

                    

                    

                

                

                    
                        console.log( '搜索事件' );
                    

                

            

            

                

                    

                    

                

                

                    
                        } )
                    

                

            

            

                

                    

                    

                

                

                    
                        .on( 'length.dt', function ( e, settings, len ) {
                    

                

            

            

                

                    

                    

                

                

                    
                        console.log( '改變單頁顯示條數事件' );
                    

                

            

            

                

                    

                    

                

                

                    
                        console.log( 'New page length: '+len );
                    

                

            

            

                

                    

                    

                

                

                    
                        } )
                    

                

            

            

                

                    

                    

                

                

                    
                        .on( 'page.dt', function () {
                    

                

            

            

                

                    

                    

                

                

                    
                        console.log( '翻頁事件' );
                    

                

            

            

                

                    

                    

                

                

                    
                        } )
                    

                

            

            

                

                    

                    

                

                

                    
                        .DataTable();

遇到問題多看官網，而且英文網站的社區討論真的有很多有效的提問和回答。

附上datatables的官網:https://datatables.net/,大家遇到問題可以多看看

轉載于:https://www.cnblogs.com/fuxin41/p/6782994.html

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：博客園

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(2149)

302021-7

datatable.js 服務端分頁+fixColumns列固定

前言

記得還是15年的時候，工作需要，獨自寫后臺管理系統。。記得那時候，最讓我頭疼的不是后臺邏輯，而是數據的列表展示。列很多的時候,頁面顯示問題;分頁樣式問題;表格樣式問題;數據加載...很多細節的問題，費時，而且總是達不到我想要的效果...也是那個時候，第一次接觸了datatable.js插件,只需要簡單的修改配置值，就可以改變表格的方方面面,真的是非常好的體驗。。。

不過，因為一些歷史原因，和時間問題，那時候對 ajax加載+服務端分頁+頁面刷新,仍然是一直很迷迷糊糊...剛好最近工作中需要做一個列表管理頁,所以就很自然的選擇了datatable.js,并且總算把 ajax加載數據+服務端分頁+reload這套流程弄通。也許還有很多種方案可以達到效果，但至少這個是肯定可行的.

樣式是基于bootstrap風格.

正文

一.前端

需要引的js文件

復制代碼

<!-- datatables樣式和bootstrap支持樣式 --> <link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.css"> <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <!--form ajax提交--> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.1/jquery.form.js"></script>

復制代碼

html部分

復制代碼

<!-- search 框start --> <div class="container"> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="用戶姓名" name="userName" id="searchUserName"> </div> & <div class="form-group"> <input type="text" class="form-control" placeholder="律所名" name="officeName" id="searchOfficeName"> </div> & <div class="form-group"> <input type="number" class="form-control" placeholder="狀態" name="be_valid" id="searchValid"> </div> <button type="button" class="btn btn-success" onclick="searchData()">搜索</button> </form> <form class="navbar-form navbar-right"> <button type="button" class="btn btn-primary btn-sm btn-warning" data-toggle="modal" data-target="#addModal"> 新增律所 </button> </form> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> </div> <!-- search 框end --> <div class="container"> <table id="mytable" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%" style="white-space: nowrap;"> <thead> <tr> <th>用戶名</th> <th>用戶ID</th> <th>郵箱</th> <th>身份</th> <th>律所</th> <th>律所id</th> <th>律所簡報</th> <th>律所創建時間</th> <th>限制人數</th> <th>驗證碼</th> <th>狀態</th> <th>備注信息</th> <th>操作</th> </tr> </thead> <tbody></tbody> <tfoot> <tr> <th>用戶名</th> <th>用戶ID</th> <th>郵箱</th> <th>身份</th> <th>律所</th> <th>律所id</th> <th>律所簡報</th> <th>律所創建時間</th> <th>限制人數</th> <th>驗證碼</th> <th>狀態</th> <th>備注信息</th> <th>操作</th> </tr> </tfoot> </table> </div>

復制代碼

因為是服務端分頁,所以我頁面做了搜索框,進行自定義的參數搜索.

js部分

復制代碼

<script type="text/javascript"> var oTable;
    $(function(){ LoadData();
    }); function searchData(){
        oTable.draw(true); // oTable.ajax.reload(null,true);  }function LoadData() {
         oTable = $('#mytable').DataTable({ //sDom: 'T<"clear">lfrtip',  oLanguage: {
                sZeroRecords: "對不起，查詢不到任何相關數據",
                sInfoEmpty: "記錄數為0" },
            sScrollX: "100%",
            sScrollXInner: "110%",
            bScrollCollapse: false, //可滾動 bDestory: true, //數據允許清空 bServerSide: true, //服務端處理分頁 bLengthChange: false, //是否允許自定義每頁顯示條數. iDisplayLength: 20, //每頁顯示10條記錄 bPaginate: true, //是否分頁 //sPaginationType: "amaze", //分頁樣式   "full_numbers" //bJQueryUI: true,//是否將分頁樣式應用到表格 bProcessing: true, //當datatable獲取數據時候是否顯示正在處理提示信息。 bFilter: false, //是否啟用條件查詢 bSearchable: false, //bStorable: false,//是否啟用列排序 //bInfo: true, //是否顯示分頁信息(頁腳信息) order: [[7, "desc"]], //默認按照第幾列排序,從1開始 bAutoWidth: false, //自動寬度 bStateSave: true, //狀態保存，使用了翻頁或者改變了每頁顯示數據數量，會保存在cookie中，下回訪問時會顯示上一次關閉頁面時的內容  ajax:{
                 dataType:'json',
                 type:'POST',
                 url: '/adminUserList',
                 headers: { 'token': window.localStorage.token //取localStorage中的token，用來做安全校驗
                 },
                 dataSrc: "aaData",
                 data:function(d){
　　　　　　　　　　　　　//取搜索的參數值,在請求服務端時,附加到請求參數中 var userName=$('#searchUserName').val(); var officeName=$('#searchOfficeName').val(); var be_valid=$('#searchValid').val();

                     d.userName=userName;
                     d.officeName=officeName;
                     d.be_valid=be_valid;
                 }
             },
            columns: [
                {
                    data: "name",
                    bSortable: false },
                {
                    data: "user_id",
                    bSortable: false },
                {
                    data: "email",
                    bSortable: false },
                {
                    data: "level_name",
                    bSortable: false },
                {
                    data: "office_name",
                    bSortable: false },
                {
                    data: "office_id",
                    bSortable: false },
                {
                    data: "officeBriefing",
                    bSortable: false },
                {   data: "office_create_time"},
                {
                    data: "limited_num",
                    bSortable: false },
                {
                    data: "verify_code",
                    bSortable: false },
                {
                    data: "be_valid",
                    bSortable: false },
                {
                    data: "remark",
                    bSortable: false },
                {
                    data: null,
                    render: function (data, type, row) { return '<button type="button" class="btn btn-primary btn-sm" onclick="editShow(\''+data.user_id+'\')">編輯</button>'; },
                    bSortable: false }
            ]
        });

    } </script>

復制代碼

二.后端

java服務端代碼

復制代碼

@ResponseBody
    @RequestMapping(value = "/adminUserList",method = RequestMethod.POST) public AjaxListResponseDTO<AppUserShowDTO> getAdminUserList(
            @ApiParam(required = true, name = "start", value = "開始條數") @RequestParam Integer start,
            @ApiParam(required = true, name = "length", value = "取多少條") @RequestParam Integer length,
            @ApiParam(required = true, name = "userName", value = "用戶名") @RequestParam String userName,
            @ApiParam(required = true, name = "officeName", value = "律所名") @RequestParam String officeName,
            @ApiParam(required = true, name = "be_valid", value = "狀態") @RequestParam Integer be_valid,
            HttpServletRequest request) throws Exception{// Map<String,String[]> paramMap=request.getParameterMap();  String[] orderTypeArr=request.getParameterValues("order[0][dir]");
        String lawOfficeOrderType=""; if(null!=orderTypeArr){
            lawOfficeOrderType=orderTypeArr[0];
        }

        AjaxListResponseDTO<AppUserShowDTO> responseDTO=new AjaxListResponseDTO<>(); //datatable.js 相關參數 String[] drawStrArr=request.getParameterValues("draw"); if(null!=drawStrArr){
            responseDTO.setSEcho(Integer.parseInt(drawStrArr[0]));
        }

        Page<AppUserShowDTO> appUserShowDTOPage = authUserService.findAllUserAndLawOffice(userName,officeName,be_valid,null!=start?start:0,null!=length?length:20,lawOfficeOrderType,"超級管理員");

        responseDTO.setITotalRecords((int) Math.ceil(appUserShowDTOPage.getTotal()));//實際需要傳數據總數,此處值不對
        responseDTO.setITotalDisplayRecords((int) Math.ceil(appUserShowDTOPage.getTotal()));
        responseDTO.setAaData(appUserShowDTOPage.getResult()); return responseDTO;
    }

復制代碼

start(起始條數,注意，是條數而不是頁數 )和length(取多少條數據)為datatable默認會傳到服務端的2個參數, userName/officeName/be_valid則為我前端自定義的附加參數。

Page是List<T>泛型集合,是開源項目PageHelper-mybatis中的類。

服務端返回給前端的json數據也有格式要求，具體見AjaxListResponseDTO類定義.

復制代碼

/** * Created by xinhuiyang on 2017/6/9. */ @Data public class AjaxListResponseDTO<T>{ private Integer sEcho; private Integer iTotalRecords; private Integer iTotalDisplayRecords; private List<T> aaData;
}

復制代碼

自此,就實現了帶搜索功能的服務端分頁效果.

三. FixColumn（固定第一列和最后一列效果）

首先,在之前的基礎上,需要添加一個js文件引用

<!-- 固定列 插件js -->
<script src="https://cdn.datatables.net/fixedcolumns/3.2.2/js/dataTables.fixedColumns.min.js"></script>

其次,在配置項中添加一項:

復制代碼

oTable = $('#mytable').DataTable({ //sDom: 'T<"clear">lfrtip',  oLanguage: {
                sZeroRecords: "對不起，查詢不到任何相關數據",
                sInfoEmpty: "記錄數為0" },
            sScrollX: "100%",
            sScrollXInner: "110%",
            bScrollCollapse: false, 
            fixedColumns: { //固定列的配置項 leftColumns: 1, //固定左邊第一列 rightColumns:1 //固定右邊第一列  },
            bDestory: true, 
            bServerSide: true, 
            .....省略......

復制代碼

然后，刷新頁面...至此，固定列效果就ok了。

后言

現在的頁面效果，還有2個瑕疵:

其一是后臺返回"總條數"不對,我是時間趕,來不及寫查詢了..大家實際使用時,自己查詢一下就行,這個好解決;

其二是前端頁面，下角顯示頁碼總數和頁腳信息顯示有問題(見下圖),不知道當后臺"總條數"準確時，會不會就ok了。我后面還會找個時間，去修復一下的...當我有解決方案時,會補充在下面的,大家有知道原因和解決方案的，也歡迎評論在下方。

頁腳圖

1.左邊數字沒顯示出來.

2.實際83條數據,每頁20條,應該最多到5頁的，但實際上,可以點任意頁，只不過從第6頁開始，數據都為空.

補充

頁面顯示不對的問題已經找到原因并且解決.

原因是：后端分頁時,需要返回給前端更多的信息,如總數多少，過濾后多少等,所以我代碼中的AjaxListResponseDTO類就不符合后端分頁時的需求了，需要改動.

修改后的類定義為：

復制代碼

/** * Created by xinhuiyang on 2017/6/9. */ @Data
@ApiModel public class AjaxListResponseDTO<T>{

    @ApiModelProperty("必要。上面提到了，Datatables發送的draw是多少那么服務器就返回多少。 這里注" +
            "意，作者出于安全的考慮，強烈要求把這個轉換為整形，即數字后再" +
            "返回，而不是純粹的接受然后返回，這是 為了防止跨站腳本（XSS）攻擊。") private Integer draw;

    @ApiModelProperty("必要。即沒有過濾的記錄數（數據庫里總共記錄數）") private Integer recordsTotal;

    @ApiModelProperty("必要。過濾后的記錄數（如果有接收到前臺的過濾條件，則返回的是過濾后的記錄數）") private Integer recordsFiltered;

    @ApiModelProperty("必要。表中中需要顯示的數據。這是一個對象數組，也可以只是" +
            "數組，區別在于 純數組前臺就不需要用 columns綁定數據，會自動按照順序" +
            "去顯示 ，而對象數組則需要使用 columns綁定數據才能正常顯示。") private List<T> aaData;

    @ApiModelProperty("可選。你可以定義一個錯誤來描述服務器出了問題后的友好提示") private String error;
}

復制代碼

相應的，controller部分代碼,也要給對應的屬性附上正確的值,改動后代碼如下：

復制代碼

 @ResponseBody
    @RequestMapping(value = "/adminUserList",method = RequestMethod.POST) public AjaxListResponseDTO<AppUserShowDTO> getAdminUserList(
            @ApiParam(required = true, name = "start", value = "開始條數") @RequestParam Integer start,
            @ApiParam(required = true, name = "length", value = "取多少條") @RequestParam Integer length,
            @ApiParam(required = true, name = "userName", value = "用戶名") @RequestParam String userName,
            @ApiParam(required = true, name = "officeName", value = "律所名") @RequestParam String officeName,
            @ApiParam(required = true, name = "be_valid", value = "狀態") @RequestParam Integer be_valid,
            HttpServletRequest request) throws Exception{ // Map<String,String[]> paramMap=request.getParameterMap();  String[] orderTypeArr=request.getParameterValues("order[0][dir]");
        String lawOfficeOrderType=""; if(null!=orderTypeArr){
            lawOfficeOrderType=orderTypeArr[0];
        }

        AjaxListResponseDTO<AppUserShowDTO> responseDTO=new AjaxListResponseDTO<>(); //datatable.js 相關參數 String[] drawStrArr=request.getParameterValues("draw"); if(null!=drawStrArr){
            responseDTO.setDraw(Integer.parseInt(drawStrArr[0]));
        } int totalCountBeforeFilter=authUserService.countUserByLevel("超級管理員");

        Page<AppUserShowDTO> appUserShowDTOPage = authUserService.findAllUserAndLawOffice(userName,officeName,be_valid,null!=start?start:0,null!=length?length:20,lawOfficeOrderType,"超級管理員");

        responseDTO.setAaData(appUserShowDTOPage.getResult());
        responseDTO.setRecordsTotal(totalCountBeforeFilter);
        responseDTO.setRecordsFiltered((int) appUserShowDTOPage.getTotal()); return responseDTO;
    }

復制代碼

然后，頁面的頁碼顯示就正確了(如圖):

本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利;

原文鏈接：https://www.cnblogs.com/Andrew-XinFei/p/7020055.html

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：博客園

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(2492)

« 1 ... 19 20 21 22 23 24 25 ... 104 »

分類

日歷

鏈接

個人資料

藍藍設計的小編 http://www.syprn.cn

存檔

亚洲va欧美va天堂v国产综合