This is supposed to be easy and 5 minute implementation......Not!!!!!

fjones68 · August 2015

I am using MVC 4 with razor C#. I followed the tutorial and was unable to get it to render. No search bar or buttons. Nothing but the filler data. On https://datatables.net/ there are more instructions. There is a download of the Datatable zip. There is the reference of juery and css. Then table formating. Still won't render. I thought it was jquery conflicts which would take forever to sort through them. The DataTable-1.10.8 download now appears in my solution so all the scripts and css would have to be moved to the appropriate folders. This has become a nightmare and I need the project complete today.I opened an empty webform project to start from scratch, still no go. How did you render this that easily. Help Please!

tangerine · August 2015

I followed the tutorial and was unable to get it to render.

What tutorial? What do you mean by "unable to get it to render"? How far have you got? Are you getting any error messages? What does your code look like?

fjones68 · August 2015

What tutorial? Here is the tutorial I used https://www.youtube.com/watch?v=GA03MzN9QFg and I followed the installation instructions on this site. Neither worked. Look how easily he implemented DataTable.

What do you mean by "unable to get it to render"? I have filler data loaded into my view, but jquery will not render the searchbox, pager or any of features of the example tables.

How far have you got? I have done everything listed on this page exactly. https://datatables.net/manual/installation

Are you getting any error messages? In inspect element under console I am getting 'Failed to load resource' for the css and the jquery. Im using the latest versions of all css and jquery.

What does your code look like? Too long to place view and _layout folder.

fjones68 · August 2015

Index.chtml View

```
<link rel="stylesheet" type="text/css" href="/DataTables-1.10.8/media/css/jquery.dataTables.css">

$(document).ready(function () { $('#example').dataTable(); });

<br>

Name	Position	Office	Age	Start date	Salary
Name	Position	Office	Age	Start date	Salary
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25	$320,800
Garrett Winters	Accountant	Tokyo	63	2011/07/25	$170,750
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000
Quinn Flynn	Support Lead	Edinburgh	22	2013/03/03	$342,000
Charde Marshall	Regional Director	San Francisco	36	2008/10/16	$470,600
Haley Kennedy	Senior Marketing Designer	London	43	2012/12/18	$313,500
Tatyana Fitzpatrick	Regional Director	London	19	2010/03/17	$385,750
Michael Silva	Marketing Designer	London	66	2012/11/27	$198,500
Paul Byrd	Chief Financial Officer (CFO)	New York	64	2010/06/09	$725,000
Gloria Little	Systems Administrator	New York	59	2009/04/10	$237,500
Bradley Greer	Software Engineer	London	41	2012/10/13	$132,000

Press Submit and check console for URL-encoded form data that would be submitted.

Submit

Data submitted to the server:

```

fjones68 · August 2015

_Layout

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link href="~/Content/easyquery.css" rel="stylesheet" />
<link href="~/Content/eqview.css" rel="stylesheet" />
@Styles.Render("~/Content/css")
@Styles.Render("~/Content/themes/base/css")
@Scripts.Render("~/bundles/modernizr")

</head>
<body>
    <header>
        <div class="content-wrapper">
            <div class="float-left">
                <p class="site-title">@Html.ActionLink("CSV Upload Tool", "Index", "Home")</p>
            </div>
            <div class="float-right">
                <section id="login">
                    @Html.Partial("_LoginPartial")
                </section>
                <nav>
                    <ul id="menu">
                        <li>@Html.ActionLink("Upload CSV", "Index", "Home")</li>
                        <li>@Html.ActionLink("Edit S", "Index", "Scansource")</li>
                        <li>@Html.ActionLink("Edit B", "Index", "Bluestar")</li>
                        <li>@Html.ActionLink("Bulk Delete S", "Index", "BulkDelete")</li>
                        <li>@Html.ActionLink("Bulk Delete B", "Index1", "BulkDelete")</li>
                        <li>@Html.ActionLink("Compare", "Index", "Compare")</li>                        
                        <li>@Html.ActionLink("CompareS", "Index", "Compare")</li>
                        <li>@Html.ActionLink("CompareB", "Index", "Compare")</li>
                        <li>@Html.ActionLink("Query ", "Index", "EasyQuery")</li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
    <div id="body">

        <section class="content-wrapper main-content clear-fix">
            @Scripts.Render("~/bundles/jquery")
            @RenderSection("script", required: false)
            @RenderBody()
        </section>
    </div>
    <footer>
        <div class="content-wrapper">
            <div class="float-left">
                <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
            </div>
        </div>
    </footer>
    <link href="~/Content/jquery-ui-1.9.0.custom.css" rel="stylesheet" />
    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)

</body>

</html>

ThomD · August 2015

You are using some sort of templating engine that make it impossible for anyone here to see what's actually happening. Where is the #example table container in your sample?

fjones68 · August 2015

I apologize for the earlier posting. I was able to render the datatable, but now I have discovered it is purely data driven by unfamiliar means. I am new to ajax and json data objects and web services. I'm using ado.net methods with sql data adapters and readers to get my data. I was looking for a quick implementation of a table with use of ado.net means of fetching data to and from sql server. Don't have time to figure out web service and ajax given the project is due tomorrow.

This is supposed to be easy and 5 minute implementation......Not!!!!!

This is supposed to be easy and 5 minute implementation......Not!!!!!

Answers

Howdy, Stranger!

Categories

DataTables

This is supposed to be easy and 5 minute implementation......Not!!!!!

This is supposed to be easy and 5 minute implementation......Not!!!!!

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables