顯示jQuery Datatables aLengthMenu爲<a>鏈接而不是<select>下拉框

Question

我正在嘗試使用jQuery Datatables插件。它擁有我想要的一切，除了沒有靈活性來顯示aLengthMenu變量。它顯示在一個<select>下拉列表中，這很好，但我有一個不靈活的設計，並希望變量只是鏈接。

這是怎麼了目前與顯示：

"aLengthMenu": [[5, 15, 30, 60, -1], [5, 15, 30, 60, "All"]] 

我希望它只是顯示這樣的鏈接，這樣可以只需點擊一個鏈接，它會顯示等指定的金額這樣的：

我知道我與數據表插件的核心和搞亂更具體地說_fnFeatureHtmlLength函數，但如果我可以得到一些幫助，它會非常棒。

Answer 1

沒有簡單的方法做到這一點，而無需打開jquery.dataTables.js文件並對其進行編輯。 是的，你是正確的......你將不得不編輯'_fnFeatureHtmlLength'函數。

我與jquery.dataTables.js版本1.9.1 轉到了「_fnFeatureHtmlLength」功能的工作（做在文件中搜索「功能_fnFeatureHtmlLength（oSettings）」，你應該找到它，上線2296枚水雷）

既然你正在編輯這個文件，我會先做一個備份。另外，註釋掉你正在替換的行，以便你可以隨時引用它們。

編輯

function _fnFeatureHtmlLength(oSettings) { 
     if (oSettings.oScroll.bInfinite) { 
      return null; 
     } 

     /* This can be overruled by not using the _MENU_ var/macro in the language variable */ 
     var sName = 'name="' + oSettings.sTableId + '_length"'; 
     //var sStdMenu = '<select size="1" '+sName+'>'; 
     var sStdMenu = ''; 
     var i, iLen; 
     var aLengthMenu = oSettings.aLengthMenu; 

     if (aLengthMenu.length == 2 && typeof aLengthMenu[0] === 'object' && 
       typeof aLengthMenu[1] === 'object') { 
      for (i = 0, iLen = aLengthMenu[0].length; i < iLen; i++) { 
       //sStdMenu += '<option value="' + aLengthMenu[0][i] + '">' + aLengthMenu[1][i] + '</option>'; 
       sStdMenu += '<a href="#" value="' + aLengthMenu[0][i] + '">' + aLengthMenu[1][i] + '</a>'; 
      } 
     } 
     else { 
      for (i = 0, iLen = aLengthMenu.length; i < iLen; i++) { 
       //sStdMenu += '<option value="' + aLengthMenu[i] + '">' + aLengthMenu[i] + '</option>'; 
       sStdMenu += '<a href="#" value="' + aLengthMenu[i] + '">' + aLengthMenu[i] + '</a>'; 
      } 
     } 
     //sStdMenu += '</select>'; 

     var nLength = document.createElement('div'); 
     if (!oSettings.aanFeatures.l) { 
      nLength.id = oSettings.sTableId + '_length'; 
     } 
     nLength.className = oSettings.oClasses.sLength; 
     nLength.innerHTML = '<label>' + oSettings.oLanguage.sLengthMenu.replace('_MENU_', sStdMenu) + '</label>'; 

     /* 
     * Set the length to the current display length - thanks to Andrea Pavlovic for this fix, 
     * and Stefan Skopnik for fixing the fix! 
     */ 
     //$('select option[value="' + oSettings._iDisplayLength + '"]', nLength).attr("selected", true); 

     //$('select', nLength).bind('change.DT', function (e) { 
     $('a', nLength).bind('click', function (e) { 
      //var iVal = $(this).val(); 
      e.preventDefault(); 
      var iVal = $(this).attr('value'); 

      /* Update all other length options for the new display */ 
      var n = oSettings.aanFeatures.l; 
      for (i = 0, iLen = n.length; i < iLen; i++) { 
       if (n[i] != this.parentNode) { 
        //$('select', n[i]).val(iVal); 
       } 
      } 

      /* Redraw the table */ 
      oSettings._iDisplayLength = parseInt(iVal, 10); 
      _fnCalculateEnd(oSettings); 

      /* If we have space to show extra rows (backing up from the end point - then do so */ 
      if (oSettings.fnDisplayEnd() == oSettings.fnRecordsDisplay()) { 
       oSettings._iDisplayStart = oSettings.fnDisplayEnd() - oSettings._iDisplayLength; 
       if (oSettings._iDisplayStart < 0) { 
        oSettings._iDisplayStart = 0; 
       } 
      } 

      if (oSettings._iDisplayLength == -1) { 
       oSettings._iDisplayStart = 0; 
      } 

      _fnDraw(oSettings); 
     }); 


     //$('select', nLength).attr('aria-controls', oSettings.sTableId); 

     return nLength; 
    } 

我也更改了datatables.css文件：

.dataTables_length a{ 
margin-right:6px; 
} 

但是無論你如何可以樣式。同樣在我編輯過的函數中的點擊事件中，您可能想要將「活動」類添加到選定的「a」標記和樣式中，但是您需要。只記得從其他'a'中刪除活動類。

我還沒有完全測試這些更改，因爲我沒有寫數據表，我不知道這些更改是否會有任何副作用。此外，我沒有使用任何插件進行測試......因此請自擔風險！