包括DataTables搜索框,并在_NavBar中显示条目

时间:2019-02-04 16:00:08

标签: c# html asp.net-mvc razor

我是MVC的新手,我搜索了这个主题,但是不明白如何使我想要的东西工作起来,我觉得这很简单。我想在搜索栏中添加搜索框并在导航栏中显示条目,而不是在导航栏中。谢谢您,我的简单问题很抱歉。 This is the output I have now

这是我的_NavBar.chtml类:

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            @Html.ActionLink("Iventory Tracker", "Index", "Inventory", new { area = "" }, new { @class = "navbar-brand" })

        </div>
       <div class="navbar-collapse collapse">
            @*
                <ul class="nav navbar-nav">

                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                <li>@Html.ActionLink("Inventory", "Index", "Inventory")</li>

            </ul>
            @Html.Partial("_LoginPartial")
            *@
        </div>
    </div>
</div>

这是“我的索引”视图:显示dataTables的JS

@section scripts
{
    <script>
        $(document).ready(function () {
            $("#inventories").DataTable({
                "pageLength": 100,




            });
        });
    </script>

1 个答案:

答案 0 :(得分:0)

这是为了重新定位选择条目并使其固定:

dataTables_wrapper .dataTables_length {
        position: fixed;
        z-index: 99999;
        margin-top: -55px;
        color: azure;
        margin-left: 10px;
    }

这是为了重新定位搜索框并使其固定:

 .dataTables_wrapper .dataTables_filter {
        position: fixed;
        margin-left: 200px;
        z-index: 99999;
        margin-top: -55px;
        color: azure;
    }

在具有dataTable的视图页面中插入,它将覆盖原始CSS。