Implement DataTables.net

Question

Implement DataTables.net

Navigation

#1 by (1 votes)

2

I am implementing DataTables.net but it is not doing the paging, I am working with ASP.NET MVC 5, the code I handle is as follows.

@{
ViewBag.Title = "Proveedor";
}

<h2>Proveedor</h2>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<link href="~/Content/datatables.min.css" rel="stylesheet" />
</head>
<body>
    <table id="proveedores" class="table table-hover display" >
        <thead>
            <tr>
            <td>ProveedorId</td>
            <td>Razón Social</td>
            <td>Número documento</td>
            <td>Dirección</td>
            <td>Teléfono</td>
            <td></td>
            <td></td>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>ProveedorId</td>
            <td>Razón Social</td>
            <td>Número documento</td>
            <td>Dirección</td>
            <td>Teléfono</td>
            <td></td>
            <td></td>
         </tr>
    </tfoot>

    <tbody>
        @foreach (var row in ViewBag.ListarProveedor)
        {
            <tr>
                <td>@row.ProveedorId</td>
                <td>@row.RazonSocial</td>
                <td>@row.NumeroDocumento</td>
                <td>@row.Direccion</td>
                <td>@row.Telefono</td>
            </tr>
        }
    </tbody>  
</table>


<script src="~/scripts/datatables.min.js"></script>
<script>
    $(document).ready(function () {
        $("#proveedores").DataTable();
    });
</script>

Documentation DataTables.net

Video Tutorial Datatables Plugin Installation and Configuration

Layout

<!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>
    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="~/Scripts/modernizr-2.6.2.js"></script>
</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">
                </ul>
            </div>
        </div>
    </div>

    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    <script src="~/scripts/jquery-3.1.1.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
</body>
</html>

jquery html5 html datatables asp.net-mvc

asked by Pedro Ávila 14.02.2017 в 19:39

source

1 answer

Doubt with sorted when sorting list of integers in the form of strings Loop syntax when it has no results

score 1 · Accepted Answer

What comments x-rw is also valid and would still not be done the page.

If you want to show icons in those empty spaces do the following:

<thead> 
  <tr> 
    <td>ProveedorId</td> 
    <td>Razón Social</td> 
    <td>Número documento</td> 
    <td>Dirección</td> 
    <td>Teléfono</td> 
    <td><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></td> 
    <td><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></td> 
  </tr> 
</thead>

and in your <tbody> you can do the following as comment @Flxtr :

<tbody>
    @foreach (var row in ViewBag.ListarProveedor)
    {
        <tr>
            <td>@row.ProveedorId</td>
            <td>@row.RazonSocial</td>
            <td>@row.NumeroDocumento</td>
            <td>@row.Direccion</td>
            <td>@row.Telefono</td>
            <td><a href="Controller/Action/@row.ProveedorId">
              <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
            </a></td> 
            <td><a href="Controller/Action/@row.ProveedorId">
              <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </a></td> 
        </tr>
    }
</tbody>

Now I explain why I would still not do paging.

What RenderBody() does is render the view where you have your table, it marks you an error that does not find the jQuery assembly reference because datatables is declared before jQuery, there are two things you can do:

1.- Change the header of _layout in this way:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="~/Scripts/modernizr-2.6.2.js"></script>

    <script src="~/scripts/jquery-3.1.1.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
</head>

2.- Change the scripts of your view to _Layout or create a section of scripts :

in your view:

@section scripts {
  <script src="~/scripts/datatables.min.js"></script>
  <script>
    $(document).ready(function () {
        $("#proveedores").DataTable();
    });
  </script>
}

in _Layout

...
</div>
  <script src="~/scripts/jquery-3.1.1.min.js"></script>
  <script src="~/Scripts/bootstrap.min.js"></script>
  @RenderSection("scripts", required: false)
</body>