Hi not able to initialize the basic table

AbhijitB · March 2019

Hi ,
I am pretty new to the DataTables. just started, i have followed all the steps however not able to render the Table with default configuration. could please help.
i am using MVC 4 EF 6 on ASP.net

kthorngren · March 2019

Are you getting any alert messages or errors in the browser's console?

Without seeing the issue its hard to say what the problem is. Can you post a link to your page?

Kevin

AbhijitB · March 2019

Hi thanks for response. i ma learning asp.net and i have website which is hosted on IIS express by VS IDE.
There are no errors or alerts the page is rendered in response to request however the table which is rendered do not come with Datatables default look and feel e.g. the no of records to display, pagination etc.

I am adding the** layout.page** content here for your review
(''')
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - MTO Estimator</title>

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@*@Scripts.Render("~/bundles/dataTables")*@

</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-sm navbar-dark fixed-top bg-dark">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mtoNavbar" aria-controls="mtoNavbar" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<a class="navbar-brand" href="#">MTO Estimator</a>

            <div class="navbar-collapse collapse" id="mtoNavbar">

                <ul class="navbar navbar-nav mr-auto">
                    <li class="nav-item">@Html.ActionLink("Projects", "Index", "Projects")</li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            MTO
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu bg-dark">
                            <li class="nav-item">@Html.ActionLink("Plant Area Dwg", "Index", "PAD")</li>
                            <li class="nav-item">@Html.ActionLink("Line Master", "Index", "LineMaster")</li>
                            <li class="nav-item">@Html.ActionLink("New Spec", "Index", "Spec")</li>
                            <li class="nav-item">@Html.ActionLink("Define Spec", "Index", "SpecDetail")</li>
                        </ul>
                    </li>

                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            Rules
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu bg-dark">
                            <li class="nav-item">@Html.ActionLink("Material Rule", "Index", "MaterialRule")</li>
                            <li class="nav-item">@Html.ActionLink("Valve Rule", "Index", "ValveRule")</li>
                            <li class="nav-item">@Html.ActionLink("Bolt Rule", "Index", "BoltRule")</li>
                        </ul>
                    </li>

                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            Masters
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu bg-dark">
                            <li class="nav-item">@Html.ActionLink("Reference", "Index", "RefMaster")</li>
                            <li class="nav-item">@Html.ActionLink("Size", "Index", "SizMaster")</li>
                            <li class="nav-item">@Html.ActionLink("Class", "Index", "ClassMaster")</li>
                            <li class="nav-item">@Html.ActionLink("Bolt Table", "Index", "BoltMaster")</li>
                            <li class="nav-item">@Html.ActionLink("Schedule", "Index", "ScheduleMaster")</li>
                            <li class="nav-item">@Html.ActionLink("Material", "Index", "MaterialMaster")</li>
                            <li class="nav-item">@Html.ActionLink("SubTee", "Index", "SubteeMaster")</li>
                            <li class="nav-item">@Html.ActionLink("MainCode", "Index", "MaincodeMaster")</li>
                            <li class="nav-item">@Html.ActionLink("Class", "Index", "ClassMaster")</li>
                            <li class="nav-item">@Html.ActionLink("Product", "Index", "ProductMaster")</li>
                            <li class="nav-item">@Html.ActionLink("User Type", "Index", "UsertypeMaster")</li>
                            <li class="nav-item">@Html.ActionLink("Special Requirement", "Index", "SpecialMaster")</li>
                        </ul>
                    </li>

                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            Reports
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu bg-dark">
                            <li class="nav-item">@Html.ActionLink("Distribution Summary", "Index", "DisSummary")</li>
                            <li class="nav-item">@Html.ActionLink("Hold Report", "Index", "Holds")</li>
                            <li class="nav-item">@Html.ActionLink("Linewise Qty Summary", "Index", "Linewise")</li>
                            <li class="nav-item">@Html.ActionLink("Longcodewise Summary", "Index", "Longcode")</li>
                            <li class="nav-item">@Html.ActionLink("MTO details", "Index", "MTODetail")</li>
                            <li class="nav-item">@Html.ActionLink("Spec details", "Index", "SpecDetail")</li>
                        </ul>
                    </li>

                </ul>
            </div>
        </div>
    </nav>

    <div class="container">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - Mto Estimator</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/dataTables")
    @RenderSection("scripts", required: false)



</div>

</body>
</html>
(''')

And my page which render table is reproduced below

@model IEnumerable<MtoEstimator.Entities.DIM_PROJECT>

@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
var pageController = ViewContext.RouteData.Values["controller"].ToString();
//var tablename = ViewData.ModelMetadata.DataTypeName();
}

@*

Projects

@pageController

@Html.ActionLink("Create New Project", "Create")

@foreach (var item in Model) { @*@Html.ActionLink("Edit", "Edit", new { id = item.projno }, new { type = "button", @class = "btn btn-warning" }) | @Html.ActionLink("Details", "Details", new { id = item.projno }, new { type = "button", @class = "btn btn-primary" }) | @Html.ActionLink("Delete", "Delete", new { id = item.projno }, new { type = "button", @class = "btn btn-danger" }) *@ }

@Html.DisplayNameFor(model => model.projname)	@Html.DisplayNameFor(model => model.clientname)	@Html.DisplayNameFor(model => model.plantdesc)	@Html.DisplayNameFor(model => model.location)
@Html.DisplayFor(modelItem => item.projname)	@Html.DisplayFor(modelItem => item.clientname)	@Html.DisplayFor(modelItem => item.plantdesc)	@Html.DisplayFor(modelItem => item.location)

@section scripts
{

$(document).ready(function () { $("#projTable").DataTable({ "paging": true, "ordering": true, "info": true }); }); $(function () { $("#projTable tr").click(function () { var tableData = $(this).children("td").map(function () { return $(this).text(); }).get(); alert("Your data is: " + $.trim(tableData[0]) + " , " + $.trim(tableData[1])); }); });

}

Hi not able to initialize the basic table

Hi not able to initialize the basic table

Answers

Projects

@Html.DisplayNameFor(model => model.projname)

@Html.DisplayNameFor(model => model.clientname)

@Html.DisplayNameFor(model => model.plantdesc)

@Html.DisplayNameFor(model => model.location)

Howdy, Stranger!

Categories

DataTables

Hi not able to initialize the basic table

Hi not able to initialize the basic table

Answers

Projects

@Html.DisplayNameFor(model => model.projname)

@Html.DisplayNameFor(model => model.clientname)

@Html.DisplayNameFor(model => model.plantdesc)

@Html.DisplayNameFor(model => model.location)

Howdy, Stranger!

Quick Links

Categories

DataTables