將JQuery腳本應用到特定的網格視圖

Question

我正在努力將JQuery腳本應用到我的頁面上的某些Gridviews，問題是當前該腳本應用於頁面上的每個Gridview，我需要以某種方式指定它的網格也適用。

我正在使用的腳本如下。作者：瑞恩Zielke。

$.fn.tablePagination = function (settings) { 
    var defaults = { 
     firstArrow: (new Image()).src = "./images/first.gif", 
     prevArrow: (new Image()).src = "./images/prev.gif", 
     lastArrow: (new Image()).src = "./images/last.gif", 
     nextArrow: (new Image()).src = "./images/next.gif", 
     rowsPerPage: 5, 
     currPage: 1, 
     optionsForRows: [5, 10], 
     ignoreRows: [] 
    }; 
    settings = $.extend(defaults, settings); 

    return this.each(function() { 
     var table = $(this)[0]; 
     var totalPagesId = '#' + table.id + '+#tablePagination #tablePagination_totalPages'; 
     var currPageId = '#' + table.id + '+#tablePagination #tablePagination_currPage'; 
     var rowsPerPageId = '#' + table.id + '+#tablePagination #tablePagination_rowsPerPage'; 
     var firstPageId = '#' + table.id + '+#tablePagination #tablePagination_firstPage'; 
     var prevPageId = '#' + table.id + '+#tablePagination #tablePagination_prevPage'; 
     var nextPageId = '#' + table.id + '+#tablePagination #tablePagination_nextPage'; 
     var lastPageId = '#' + table.id + '+#tablePagination #tablePagination_lastPage'; 

     var possibleTableRows = $.makeArray($('tbody tr', table)); 
     var tableRows = $.grep(possibleTableRows, function (value, index) { 
      return ($.inArray(value, defaults.ignoreRows) == -1); 
     }, false) 

     var numRows = tableRows.length 
     var totalPages = resetTotalPages(); 
     var currPageNumber = (defaults.currPage > totalPages) ? 1 : defaults.currPage; 
     if ($.inArray(defaults.rowsPerPage, defaults.optionsForRows) == -1) 
      defaults.optionsForRows.push(defaults.rowsPerPage); 


     function hideOtherPages(pageNum) { 
      if (pageNum == 0 || pageNum > totalPages) 
       return; 
      var startIndex = (pageNum - 1) * defaults.rowsPerPage; 
      var endIndex = (startIndex + defaults.rowsPerPage - 1); 
      $(tableRows).show(); 
      for (var i = 0; i < tableRows.length; i++) { 
       if (i < startIndex || i > endIndex) { 
        $(tableRows[i]).hide() 
       } 
      } 
     } 

     function resetTotalPages() { 
      var preTotalPages = Math.round(numRows/defaults.rowsPerPage); 
      var totalPages = (preTotalPages * defaults.rowsPerPage < numRows) ? preTotalPages + 1 : preTotalPages; 
      if ($(totalPagesId).length > 0) 
       $(totalPagesId).html(totalPages); 
      return totalPages; 
     } 

     function resetCurrentPage(currPageNum) { 
      if (currPageNum < 1 || currPageNum > totalPages) 
       return; 
      currPageNumber = currPageNum; 
      hideOtherPages(currPageNumber); 
      $(currPageId).val(currPageNumber) 
     } 

     function resetPerPageValues() { 
      var isRowsPerPageMatched = false; 
      var optsPerPage = defaults.optionsForRows; 
      optsPerPage.sort(); 
      var perPageDropdown = $(rowsPerPageId)[0]; 
      perPageDropdown.length = 0; 
      for (var i = 0; i < optsPerPage.length; i++) { 
       if (optsPerPage[i] == defaults.rowsPerPage) { 
        perPageDropdown.options[i] = new Option(optsPerPage[i], optsPerPage[i], true, true); 
        isRowsPerPageMatched = true; 
       } 
       else { 
        perPageDropdown.options[i] = new Option(optsPerPage[i], optsPerPage[i]); 
       } 
      } 
      if (!isRowsPerPageMatched) { 
       defaults.optionsForRows == optsPerPage[0]; 
      } 
     } 

     function createPaginationElements() { 
      var htmlBuffer = []; 
      htmlBuffer.push("<div id='tablePagination'>"); 
      htmlBuffer.push("<span id='tablePagination_perPage'>"); 
      htmlBuffer.push("<select id='tablePagination_rowsPerPage'><option value='5'>5</option></select>"); 
      htmlBuffer.push("per page"); 
      htmlBuffer.push("</span>"); 
      htmlBuffer.push("<span id='tablePagination_paginater'>"); 
      htmlBuffer.push("<img id='tablePagination_firstPage' src='" + defaults.firstArrow + "'>"); 
      htmlBuffer.push("<img id='tablePagination_prevPage' src='" + defaults.prevArrow + "'>"); 
      htmlBuffer.push("Page"); 
      htmlBuffer.push("<input id='tablePagination_currPage' type='input' value='" + currPageNumber + "' size='1'>"); 
      htmlBuffer.push("of <span id='tablePagination_totalPages'>" + totalPages + "</span>"); 
      htmlBuffer.push("<img id='tablePagination_nextPage' src='" + defaults.nextArrow + "'>"); 
      htmlBuffer.push("<img id='tablePagination_lastPage' src='" + defaults.lastArrow + "'>"); 
      htmlBuffer.push("</span>"); 
      htmlBuffer.push("</div>"); 
      return htmlBuffer.join("").toString(); 
     } 

     if ($(totalPagesId).length == 0) { 
      $(this).after(createPaginationElements()); 
     } 
     else { 
      $('#tablePagination_currPage').val(currPageNumber); 
     } 
     resetPerPageValues(); 
     hideOtherPages(currPageNumber); 

     $(firstPageId).bind('click', function (e) { 
      resetCurrentPage(1) 
     }); 

     $(prevPageId).bind('click', function (e) { 
      resetCurrentPage(currPageNumber - 1) 
     }); 

     $(nextPageId).bind('click', function (e) { 
      resetCurrentPage(currPageNumber + 1) 
     }); 

     $(lastPageId).bind('click', function (e) { 
      resetCurrentPage(totalPages) 
     }); 

     $(currPageId).bind('change', function (e) { 
      resetCurrentPage(this.value) 
     }); 

     $(rowsPerPageId).bind('change', function (e) { 
      defaults.rowsPerPage = parseInt(this.value, 10); 
      totalPages = resetTotalPages(); 
      resetCurrentPage(1) 
     }); 

    }) 
}; 

}）（jQuery）;

腳本啓用客戶端具有以下功能：

 $('table').tablePagination({}); 

它也有一些CSS如下：

 #testTable { 
     width : 300px; 
     margin-left: auto; 
     margin-right: auto; 
     } 

     #tablePagination { 
     background-color: Transparent; 
     font-size: 0.8em; 
     padding: 0px 5px; 
     height: 20px 
     } 

     #tablePagination_paginater { 
     margin-left: auto; 
     margin-right: auto; 
     } 

     #tablePagination img { 
     padding: 0px 2px; 
     } 

     #tablePagination_perPage { 
     float: left; 
     } 

     #tablePagination_paginater { 
     float: right; 
     } 

我已經嘗試了幾件事情要這個腳本適用於某一特定gridviews：

將客戶端腳本更改爲：

$('#GridviewName').tablePagination({}); 

我也有試過如下

 var possibleTableRows = $.makeArray($('.pagingclass tbody tr', table)); 

在這裏，我試圖指定一個類來進行一些更改腳本文件本身，試圖得到它的工作，然後我還補充說，CSS類gridview爲了將腳本應用於那一個gridview，但它不起作用。

我不完全確定我該怎麼做，或者如果有可能的話。任何幫助將不勝感激。

Answer 1

當您使用$('table').tablePagination({});您的目標網頁上的所有表，你應該使用在GridView

$('#<%=GridViewID.ClientID%>').tablePagination({}); 

的ID。如果您查看從gridview控件呈現的HTML，則會看到它與您在控件中指定的ID類似，但不一樣。這就是爲什麼你需要使用客戶端ID指定，而不是像$('#GridViewID').tablePagination({});