根据用户选择的行数进行分页

Question

我想使用香草javascript执行分页，其中每个页面最多包含x行，其中x是用户在select标签中选择的值。我试图做这样的事情，但是没有用。帮助将不胜感激。

<form>
                <select name="count" id="rows_per_pages">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="5">5</option>
                        <option value="10">10</option>
                </select>
                <button type="button" onclick="fun()">Click Me!</button>
        </form>

    <table id="myTable">
        <tr>
            <th>Head col 1</th>
            <th>Head col 2</th>
        </tr>
        <tr>
            <td>first row col1</td>
            <td>first row col2</td∫>
        </tr>
        <tr>
            <td>row #2 col1</td>
            <td>row #2 col2</td>
        </tr>
        <tr>
            <td>row #3 col1</td>
            <td>row #3 col2</td>
        </tr>
        <tr>
            <td>row #4 col1</td>
            <td>row #4 col2</td>
        </tr>
        <tr>
            <td>row #5 col1</td>
            <td>row #5 col2</td>
        </tr>
        <tr>
            <td>row #6 col1</td>
            <td>row #6 col2</td>
        </tr>
    </table>



// get the table element
var $table = document.getElementById("myTable"),
// number of rows per page
$n = 5,
// number of rows of the table
$rowCount = $table.rows.length,
// get the first cell's tag name (in the first row)
$firstRow = $table.rows[0].firstElementChild.tagName,
// boolean var to check if table has a head row
$hasHead = ($firstRow === "TH"),
// an array to hold each row
$tr = [],
// loop counters, to start count from rows[1] (2nd row) if the first row has a head tag
$i,$ii,$j = ($hasHead)?1:0,
// holds the first row if it has a (<TH>) & nothing if (<TD>)
$th = ($hasHead?$table.rows[(0)].outerHTML:"");
// count the number of pages
var $pageCount = Math.ceil($rowCount / $n);
// if we had one page only, then we have nothing to do ..
if ($pageCount > 1) {
    // assign each row outHTML (tag name & innerHTML) to the array
    for ($i = $j,$ii = 0; $i < $rowCount; $i++, $ii++)
        $tr[$ii] = $table.rows[$i].outerHTML;
    // create a div block to hold the buttons
    $table.insertAdjacentHTML("afterend","<div id='buttons'></div");
    // the first sort, default page is the first one
    sort(1);
}

function fun(){
    $table = document.getElementById("myTable");
    // number of rows per page
    $n = Number(document.getElementById("rows_per_pages").value);
    alert($n);
    // number of rows of the table
    $rowCount = $table.rows.length;
    // get the first cell's tag name (in the first row)
    $firstRow = $table.rows[0].firstElementChild.tagName;
    // boolean var to check if table has a head row
    $hasHead = ($firstRow === "TH");
    // an array to hold each row
    $tr = [];
    // loop counters, to start count from rows[1] (2nd row) if the first row has a head tag
    $i,$ii,$j = ($hasHead)?1:0;
    // holds the first row if it has a (<TH>) & nothing if (<TD>)
    $th = ($hasHead?$table.rows[(0)].outerHTML:"");
    // count the number of pages
    var $pageCount = Math.ceil($rowCount / $n);
    // if we had one page only, then we have nothing to do ..
    if ($pageCount > 1) {
        // assign each row outHTML (tag name & innerHTML) to the array
        for ($i = $j,$ii = 0; $i < $rowCount; $i++, $ii++)
            $tr[$ii] = $table.rows[$i].outerHTML;
        // create a div block to hold the buttons
        $table.insertAdjacentHTML("afterend","<div id='buttons'></div");
        // the first sort, default page is the first one
        sort(1);
    }
}

// ($p) is the selected page number. it will be generated when a user clicks a button
function sort($p) {
    /* create ($rows) a variable to hold the group of rows
    ** to be displayed on the selected page,
    ** ($s) the start point .. the first row in each page, Do The Math
    */
    var $rows = $th,$s = (($n * $p)-$n);
    for ($i = $s; $i < ($s+$n) && $i < $tr.length; $i++)
        $rows += $tr[$i];

    // now the table has a processed group of rows ..
    $table.innerHTML = $rows;
    // create the pagination buttons
    document.getElementById("buttons").innerHTML = pageButtons($pageCount,$p);
    // CSS Stuff
    document.getElementById("id"+$p).setAttribute("class","active");
}


// ($pCount) : number of pages,($cur) : current page, the selected one ..
function pageButtons($pCount,$cur) {
    /* this variables will disable the "Prev" button on 1st page
       and "next" button on the last one */
    var $prevDis = ($cur == 1)?"disabled":"",
        $nextDis = ($cur == $pCount)?"disabled":"",
        /* this ($buttons) will hold every single button needed
        ** it will creates each button and sets the onclick attribute
        ** to the "sort" function with a special ($p) number..
        */
        $buttons = "<input type='button' value='&lt;&lt; Prev' onclick='sort("+($cur - 1)+")' "+$prevDis+">";
    for ($i=1; $i<=$pCount;$i++)
        $buttons += "<input type='button' id='id"+$i+"'value='"+$i+"' onclick='sort("+$i+")'>";
    $buttons += "<input type='button' value='Next &gt;&gt;' onclick='sort("+($cur + 1)+")' "+$nextDis+">";
    return $buttons;
}