javascript - 通过分页更改表信息

Question

我有一个表，其中填充了 SQL 语句，并且它显示了前 20 行。我还有一个分页，告诉我会有多少页。 (总行数/20)

我想更改按下按钮时显示的数据，例如第 3 页将显示第 41-60 行。这就是我使用 JS 将信息放入表中的方法。

var pages = document.createElement('li');
    var link = document.createElement('a');
    var span = document.createElement('span');
    link.setAttribute('href', '#');
    link.setAttribute('aria-label', 'Previous');
    span.setAttribute('aria-hidden', 'true');
    span.innerHTML = "«";
    link.appendChild(span)
    pages.appendChild(link)
    $('#pgeCounter').append(pages);

    for (counter = 1; counter <= data.d.NumPages; counter++) {
        var pages = document.createElement('li');
        var link = document.createElement('a');
        link.setAttribute('href', '#');
        link.innerHTML = counter;
        pages.appendChild(link)
        $('#pgeCounter').append(pages);
    }

    var pages = document.createElement('li');
    var link = document.createElement('a');
    var span = document.createElement('span');
    link.setAttribute(this.RowInfo + 20);
    link.setAttribute('href', '#');
    link.setAttribute('aria-label', 'Next');
    span.setAttribute('aria-hidden', 'true');
    span.innerHTML = "»";
    link.appendChild(span)
    pages.appendChild(link)
    $('#pgeCounter').append(pages);

以及 VB.NET 端。

Public Structure appstuff
    Public NumPages As Integer
    Public data As List(Of Object)
End Structure
<WebMethod()>
Public Function getData(appname As String) As appstuff
    Dim res As appstuff
    res.data = New List(Of Object)
    'Dim data As New List(Of Object)

    Dim rowfrom As Integer = 1

    Using dr As New DataReader(Dif)
        Dim QP As New List(Of SqlClient.SqlParameter)
        QP.Add(New SqlClient.SqlParameter("@appname", appname))
        QP.Add(New SqlClient.SqlParameter("@rowfrom", rowfrom))
        dr.ExecuteReader("SELECT  * FROM    ( SELECT    ROW_NUMBER() OVER ( ORDER BY SOLUTION_VERSION_HISTORY.SOLUTION_DETAIL_UID ) AS RowNum,COUNT(SOLUTION_VERSION_HISTORY.SOLUTION_DETAIL_UID) OVER(PARTITION BY 1) as TotalRows,SOLUTION_DETAIL.SOLUTION_DETAIL_NAME,SOLUTION_VERSION_HISTORY.DATE_TIME,SOLUTION_VERSION_HISTORY.RELEASE_NOTES,SOLUTION_VERSION_HISTORY.SOLUTION_UID
                         FROM      SOLUTION_VERSION_HISTORY
                         INNER JOIN SOLUTION_TYPE ON SOLUTION_VERSION_HISTORY.SOLUTION_TYPE_UID = SOLUTION_TYPE.SOLUTION_TYPE_UID
                         INNER JOIN SOLUTION_DETAIL ON SOLUTION_VERSION_HISTORY.SOLUTION_DETAIL_UID = SOLUTION_DETAIL.SOLUTION_DETAIL_UID
                         WHERE SOLUTION_TYPE.SOLUTION_TYPE_NAME = @appname ) AS RowConstrainedResult
                         WHERE   RowNum > @rowfrom
                         AND RowNum <= (@rowfrom + 20)
                         ORDER BY RowNum", QP)
        If dr.Read Then
            res.NumPages = dr!TotalRows \ 20
            Do
                res.data.Add(New With {
              Key .Id = dr!SOLUTION_DETAIL_NAME,
              Key .DTime = Format(dr!DATE_TIME, "dd-MMMM-yyyy"),
              Key .RNotes = dr!RELEASE_NOTES,
              Key .RowInfo = dr!RowNum
              })
            Loop While dr.Read
        End If
    End Using

    Dim serializer = New JavaScriptSerializer()
    serializer.MaxJsonLength = Int32.MaxValue

    Return res
End Function

Answer 1

使用 simplePagination 插件

$("#pgeCounter").pagination ( {
        itemsOnPage: 5,
        pages: data.d.NumPages,

        onPageClick: function (pageNum) {
            //alert(pageNum);
            fillTable(currAppName, pageNum);
        }
    });