Hi not able to initialize the basic table

Hi not able to initialize the basic table

AbhijitBAbhijitB Posts: 2Questions: 1Answers: 0

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

Answers

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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

  • AbhijitBAbhijitB Posts: 2Questions: 1Answers: 0

    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

    @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])); }); });

    }

This discussion has been closed.