Question

在我的视图中，我实现了分页，一切看起来都不错。然而，页码的格式不是我所期望的。它显示这样的页面索引：

««
«
…
3
4
5
6
7
8
9
10
11
12
…
»
»»

点击此链接有效，但它应该显示直线

这是我的观点的代码

<table>
    <tr>
        <th>
           Account Type
        </th>
        <th>
           Account #1
        </th>
        <th>
           Account #2
        </th>
        <th>
           Amount
        </th>
        <th>
           Comment
        </th>
         <th>
           Date
        </th>

    </tr>

    @foreach (var item in Model) 
    {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.TransactionType)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.AccountNumber)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.DestAccount)
        </td>
         <td>
            @Html.DisplayFor(modelItem => item.Amount)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Comment)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ModifiedDate)
        </td>

    </tr>
}
</table>

@Html.PagedListPager(Model, page => Url.Action("Index",new {page}))

这是生成页面的html

enter code here

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Statements</title>
    <link href="/Content/site.css" rel="stylesheet"/>

    <script src="/Scripts/modernizr-2.5.3.js"></script>

</head>
<body>



            <div id="midNav">
                <a href="/ATM">ATM</a>
                <span>  |  </span>
                <a href="/Statement">Statement</a>
                <span>  |  </span>
                <a href="/Customer">My Profile</a>
            </div>
            <div id="nav">
                <strong>dalmar202</strong>
                <span>  |  </span>
                <a href="/User/LogOut">Log Out</a>
            </div>           




    <div id="content" >



<h2>Your Statements</h2>

<select id="Accounts" name="Accounts"><option value="">-- Select Account --</option>
<option value="1">1</option>
<option value="2">2</option>
</select>

<table>
    <tr>
        <th>
           Account Type
        </th>
        <th>
           Account #1
        </th>
        <th>
           Account #2
        </th>
        <th>
           Amount
        </th>
        <th>
           Comment
        </th>
         <th>
           Date
        </th>

    </tr>

    <tr>
        <td>
            D
        </td>
        <td>
            1
        </td>
        <td>
            1
        </td>
         <td>
            150.00
        </td>
        <td>
            saad
        </td>
        <td>
            26/09/2013 8:49:19 PM
        </td>

    </tr>
    <tr>
        <td>
            D
        </td>
        <td>
            2
        </td>
        <td>
            2
        </td>
         <td>
            50.00
        </td>
        <td>
            saad
        </td>
        <td>
            26/09/2013 9:00:29 PM
        </td>

    </tr>
    <tr>
        <td>
            D
        </td>
        <td>
            2
        </td>
        <td>
            2
        </td>
         <td>
            150.00
        </td>
        <td>
            ss
        </td>
        <td>
            26/09/2013 9:41:09 PM
        </td>

    </tr>
    <tr>
        <td>
            D
        </td>
        <td>
            1
        </td>
        <td>
            1
        </td>
         <td>
            0.00
        </td>
        <td>

        </td>
        <td>
            26/09/2013 10:10:58 PM
        </td>

    </tr>
    <tr>
        <td>
            D
        </td>
        <td>
            1
        </td>
        <td>
            1
        </td>
         <td>
            0.00
        </td>
        <td>

        </td>
        <td>
            26/09/2013 10:19:07 PM
        </td>

    </tr>
</table>

<div class="pagination"><ul><li class="active"><a>1</a></li><li><a href="/Statement?page=2">2</a></li><li><a href="/Statement?page=3">3</a></li><li><a href="/Statement?page=4">4</a></li><li><a href="/Statement?page=5">5</a></li><li><a href="/Statement?page=6">6</a></li><li><a href="/Statement?page=7">7</a></li><li><a href="/Statement?page=8">8</a></li><li><a href="/Statement?page=9">9</a></li><li><a href="/Statement?page=10">10</a></li><li class="disabled PagedList-ellipses"><a>&#8230;</a></li><li class="PagedList-skipToNext"><a href="/Statement?page=2">»</a></li><li class="PagedList-skipToLast"><a href="/Statement?page=45">»»</a></li></ul></div>


        <script src="/Scripts/jquery-1.7.1.js"></script>



    </div>

    <div id="footer"></div>
</body>
</html>

Answer 1

请执行以下操作


    .pagination ul {
        margin-left: 10px;
      list-style:none;

    }
    .pagination li {
        display: inline;

    }

MVC分页显示页码的问题

1 个答案: