jquery.dataTables

1.    安装 juery datatable  
2.    我们需要在视图中引入 jQuery DataTables 的必要的 JS 和 CSS，为此，我们需要注册 jQuery DataTables，请打开位于 App_Start 文件夹中的 BundleConfig.cs 文件并在 CSS 和 JS 文件的结尾处添加以下代码：
bundles.Add(new ScriptBundle("~/bundles/datatables").Include(
                        "~/Scripts/DataTables/jquery.dataTables.min.js",
                        "~/Scripts/DataTables/dataTables.bootstrap.js"));

bundles.Add(new StyleBundle("~/Content/datatables").Include(
          "~/Content/DataTables/css/dataTables.bootstrap.css"));


在为数据表添加了脚本和 CSS 之后，我们需要在总体布局中添加它们，默认情况下， _Layout.cshtml 位于 Views >> Shared 中，_ViewStart.cshtml 也默认位于这里。



    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Styles.Render("~/Content/datatables")  // 这里是就是增加的引入
    @Scripts.Render("~/bundles/datatables")  //这里是就是增加的引入
    @RenderSection("scripts", required: false)

3.    展现的视图


@model IEnumerable<WebApplication2.Models.Person>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<div class="row">
<div class="col-md-12">
    <div class="panel panel-primary list-panel" id="list-panel">
        <div class="panel-heading list-panel-heading">
            <h1 class="panel-title list-panel-title">Assets</h1>
        </div>
        <div class="panel-body">
            <table id="assets-data-table" class="table table-striped table-bordered" style="width:100%">
                <thead>
                    <tr>
                        <th>Bar Code</th>
                        <th>Manufacturer</th>
                        <th>Model Number</th>
                       
                    </tr>
                </thead>
                <tbody>
                    @foreach (var asset in Model)
                    {
                        <tr>
                            <td>@asset.Age</td>
                            <td>@asset.names</td>
                            <td>@asset.id</td>
                         
                        </tr>
                    }

                 




                </tbody>
            </table>
        </div>
    </div>
</div>
</div>

@section Scripts
{
    <script type="text/javascript">
        $(document).ready(function () {
            // alert("ddd")
            $('#assets-data-table').DataTable({
                "oLanguage": {
                    "sLengthMenu": "每页显示 _MENU_ 条记录",
                    "sZeroRecords": "抱歉， 没有找到",
                    "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
                    "sInfoEmpty": "没有数据",
                    "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
                    "oPaginate": {
                        "sFirst": "首页",
                        "sPrevious": "前一页",
                        "sNext": "后一页",
                        "sLast": "尾页"
                    },
                    "sZeroRecords": "没有检索到数据",
                    "sProcessing": "<img src='./loading.gif' />",

 "sSearch": "搜索:",  

                }
            } )
                
        });
    </script>
}

$('#datatable').DataTable({  
   
  language: {  
      "sProcessing": "处理中...",  
      "sLengthMenu": "显示 _MENU_ 项结果",  
      "sZeroRecords": "没有匹配结果",  
      "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",  
      "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",  
      "sInfoFiltered": "(由 _MAX_ 项结果过滤)",  
      "sInfoPostFix": "",  
      "sSearch": "搜索:",  
      "sUrl": "",  
      "sEmptyTable": "表中数据为空",  
      "sLoadingRecords": "载入中...",  
      "sInfoThousands": ",",  
      "oPaginate": {  
          "sFirst": "首页",  
          "sPrevious": "上页",  
          "sNext": "下页",  
          "sLast": "末页"  
      },  
      "oAria": {  
          "sSortAscending": ": 以升序排列此列",  
          "sSortDescending": ": 以降序排列此列"  
      }  
  }  
);  
 });       
  </script> 

 

 

"../" 本地根
"./"上一级
"~/"服务器根