Fatal编程技术网
  • jquery/
  • Hello World jQuery数据表示例。排序图标有点不对劲

Hello World jQuery数据表示例。排序图标有点不对劲

jquery asp.net-mvc datatables

Hello World jQuery数据表示例。排序图标有点不对劲,jquery,asp.net-mvc,datatables,Jquery,Asp.net Mvc,Datatables,我想这可以通过几个步骤轻松复制： 使用Visual Studio 2015，我使用ASP.NET MVC模板创建了一个新的web项目。然后，我将jquery.datatables安装到我的ASP.NETMVC项目中 Install-Package jquery.datatables 1.10.11 并修改了主视图文件夹中生成的index.cshtml，以查看是否可以使数据表正常工作 @{ ViewBag.Title = "Home Page"; } <table class=

我想这可以通过几个步骤轻松复制：

使用Visual Studio 2015，我使用ASP.NET MVC模板创建了一个新的web项目。然后，我将jquery.datatables安装到我的ASP.NETMVC项目中

Install-Package jquery.datatables
1.10.11
并修改了主视图文件夹中生成的index.cshtml，以查看是否可以使数据表正常工作

@{
    ViewBag.Title = "Home Page";
}


<table class="table table table-striped table-hover">
    <thead>
        <tr>
            <th>Col 1</th>
            <th>Col 1</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>A</td>
            <td>2</td>
        </tr>
        <tr>
            <td>5</td>
            <td>4</td>
        </tr>
        <tr>
            <td>X</td>
            <td>7</td>
        </tr>
        <tr>
            <td>A</td>
            <td>2</td>
        </tr>
        <tr>
            <td>5</td>
            <td>4</td>
        </tr>
        <tr>
            <td>6</td>
            <td>7</td>
        </tr>
        <tr>
            <td>A</td>
            <td>2</td>
        </tr>
        <tr>
            <td>5</td>
            <td>4</td>
        </tr>
        <tr>
            <td>6</td>
            <td>7</td>
        </tr>
        <tr>
            <td>X</td>
            <td>7</td>
        </tr>
        <tr>
            <td>A</td>
            <td>2</td>
        </tr>
        <tr>
            <td>5</td>
            <td>4</td>
        </tr>
        <tr>
            <td>6</td>
            <td>7</td>
        </tr>
        <tr>
            <td>A</td>
            <td>2</td>
        </tr>
        <tr>
            <td>5</td>
            <td>4</td>
        </tr>
        <tr>
            <td>6</td>
            <td>7</td>
        </tr>
    </tbody>
</table>

@section scripts{
    <script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
    <script src="~/Scripts/DataTables/dataTables.bootstrap.js"></script>
    <script>
        $(document)
            .ready(function () {
                $('.table').dataTable();
            });
    </script>

}

@{
ViewBag.Title=“主页”；
}
第1列
第1列
A.
2.
5.
4.
X
7.
A.
2.
5.
4.
6.
7.
A.
2.
5.
4.
6.
7.
X
7.
A.
2.
5.
4.
6.
7.
A.
2.
5.
4.
6.
7.
@节脚本{
$（文件）
.ready（函数（）{
$（'.table'）.dataTable（）；
});
}
我在母版页中添加了所需的css和js引用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    <link href="~/Content/DataTables/css/jquery.dataTables.css" rel="stylesheet" />    
    <link href="~/Content/DataTables/css/dataTables.bootstrap.css" rel="stylesheet" />
</head>
<body>
    <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("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>


@ViewBag.Title-我的ASP.NET应用程序
@style.Render（“~/Content/css”）
@Scripts.Render（“~/bundles/modernizer”）
@ActionLink（“应用程序名称”、“索引”、“主页”、新{area=”“}、新{@class=“navbar品牌”}）

    

  • @ActionLink（“主页”、“索引”、“主页”）
    • 

  • @ActionLink（“关于”、“关于”、“主页”）
    • 

  • @ActionLink（“联系人”、“联系人”、“主页”）
    • 


@Html.Partial（“_LoginPartial”）
@RenderBody（）


&抄袭@DateTime.Now.Year-我的ASP.NET应用程序

@Scripts.Render（“~/bundles/jquery”）
@Scripts.Render（“~/bundles/bootstrap”）
@RenderSection（“脚本”，必需：false）
HTML表变成了DataTable，但是排序图标看起来有点奇怪。这是他们应该看起来的样子。我发现：

但是，我的目光却远去了：

我有一个巨大的半透明的“向下箭头，右边有3行”，旁边是我所期望的向上向下箭头

我似乎无法理解CSS

这里发生的事情是，
/3/dataTables.bootstrap.css
（仅v3）正在“本机”箭头上方添加额外的
：：glyph图标半人类型的内容。例如，在蓝色指示器旁边有一个黑色的
字形图标左缩进（我相信是unicode
\e150
）

就我个人而言，我不喜欢它，它花了一些时间来弄清楚（我使用的是angular），但无法理解为什么有必要用一些全新的东西来丰富引导样式

您可以在包含
dataTables.bootstrap.CSS
之后添加此CSS
，以中和额外的图标：


table.dataTable thead.sorting\u asc:after{
内容：“；
}
table.dataTable thead.排序：之后{
内容：“；
}
table.dataTable thead.sorting_desc:after{
内容：“；
}


然后会出现好的旧排序图标，并且只显示它们


您也可以完全省略
dataTables.bootstrap.css
（但不包括
dataTables.bootstrap.js
和
bootstrap.min.css
），我自己在一些项目中这样做，但这并没有真正的区别。
dataTables.bootstrap.css中的许多调整都是大多数人在css中已经做过的-比如给标题一个指针光标，禁用引导，加上边距等等。
这里发生的是
/3/dataTables.bootstrap.css
（仅v3）正在“本机”箭头上方添加额外的半人字形图标：：内容。例如，在蓝色指示器旁边有一个黑色的
字形图标左缩进（我相信是unicode
\e150
）

就我个人而言，我不喜欢它，它花了一些时间来弄清楚（我使用的是angular），但无法理解为什么有必要用一些全新的东西来丰富引导样式

您可以在包含
dataTables.bootstrap.CSS
之后添加此CSS
，以中和额外的图标：


table.dataTable thead.sorting\u asc:after{
内容：“；
}
table.dataTable thead.排序：之后{
内容：“；
}
table.dataTable thead.sorting_desc:after{
内容：“；
}


然后会出现好的旧排序图标，并且只显示它们


您也可以完全省略
dataTables.bootstrap.css
（但不包括
dataTables.bootstrap.js
和
bootstrap.min.css
），我自己在一些项目中这样做，但这并没有真正的区别。
dataTables.bootstrap.css
中的许多调整都是大多数人在css中已经做过的-比如给标题一个指针光标，禁用bootstrap exagarated margins等等。
尝试删除
jquery.dataTables.css
链接。很好的猜测，我希望它能工作，但没有，结果是一样的。我想它可能有引导和jquery风格的竞争。我删除了引导css，它看起来像预期的箭头。我不确定我是否理解引导图标。尽管我理解，箭头总是指向下方