Datatables CSS/Jquery scripts not modifying my tables

enter image description hereenter image description herei am new to MVC. i am trying to modify a table using DataTables JQuery scripts. i was able to install the datatable package from NPM. i modified my my bundles in App_Start; i also modified my Layout.cshtml file to be in sync with the budles in my App_Start folder.
thing is, when i modify my table to render using Datable lib, it doesnt. the page still renders the old non formatted table. can any body help me with any ideas where i have gone wrong?

i will attach my bundles_config as well as my views (index and Layout)

please help. thanks

<!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>

    @Styles.Render("~/Content/css")

    @Scripts.Render("~/bundles/modernizr")

</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">

                    <li>@Html.ActionLink("Home", "Index", "Home")</li>

                    <li>@Html.ActionLink("About", "About", "Home")</li>

                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>

                </ul>

            </div>

        </div>

    </div>

    <div class="container body-content">

        @RenderBody()

        <hr />

        <footer>

            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>

        </footer>

    </div>



    @*@Scripts.Render("~/bundles/jquery")

    @Scripts.Render("~/bundles/bootstrap")*@

    @Scripts.Render("~/bundles/lib")

    @RenderSection("scripts", required: false)

</body>

</html>





--above is my Layout.cshtml

above is an excerpt from my index view showing my table with an id(students).

</table>

@section scripts

    {

    <script>

        $(document).ready(function () {

            $("#students").DataTable();



            $("#students").on("click", ".js-delete", function () {

                var button = $(this);

                bootbox.confirm("are you sure you want to delete this customer?", function (result) {

                    if (result) {

                        $.ajax({

                            url: "/Students/delete/" + button.attr("data-student-id"),





                            method: "delete",

                            success: function () {

                                button.Parent("tr").remove();



                            }



                        });

                    }

                });





            });

        });

    </script>

    }

using System.Web;

using System.Web.Optimization;



namespace ContosoSite

{

    public class BundleConfig

    {

        // For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862

        public static void RegisterBundles(BundleCollection bundles)

        {

            bundles.Add(new ScriptBundle("~/bundles/lib").Include(

                 "~/Scripts/bootstrap.js",

                      "~/Scripts/bootbox.js",

                        "~/Scripts/jquery-{version}.js",

                        "~/Scripts/datatables/jquery.datatables.js",

                        "~/Scripts/datatables/datatables.bootstrap.js"));



            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(

                        "~/Scripts/jquery.validate*"));



            // Use the development version of Modernizr to develop with and learn from. Then, when you're

            // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.

            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(

                        "~/Scripts/modernizr-*"));





            bundles.Add(new StyleBundle("~/Content/css").Include(

                      "~/Content/bootstrap.css",

                      "~/Content/datatables/css/datatables.bootstrap.css",

                      "~/Content/site.css"));

        }

    }

}





above is my BundleConfig file

edited Nov 26 '18 at 10:02

asked Nov 25 '18 at 19:44

uchenna

Can you add a snapshot for reference which is old grid design and what new you want?

– Saineshwar
Nov 26 '18 at 3:25

did you check that the js and css render correctly?

– Mannan Bahelim
Nov 26 '18 at 9:28

@saineshwar i have added both images. one showing the way the grid is presently, the other showing what i expect it to be after applying the codes

– uchenna
Nov 26 '18 at 10:05

@Mannan Bahelim i think so

– uchenna
Nov 26 '18 at 10:05

Add these lines to the head section of the Layout page: @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/lib") and move the line @Scripts.Render("~/bundles/bootstrap") to the body like it is now.

– Jaggan_j
Nov 27 '18 at 22:03

add a comment |

i will attach my bundles_config as well as my views (index and Layout)

please help. thanks

<!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>

    @Styles.Render("~/Content/css")

    @Scripts.Render("~/bundles/modernizr")

</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">

                    <li>@Html.ActionLink("Home", "Index", "Home")</li>

                    <li>@Html.ActionLink("About", "About", "Home")</li>

                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>

                </ul>

            </div>

        </div>

    </div>

    <div class="container body-content">

        @RenderBody()

        <hr />

        <footer>

            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>

        </footer>

    </div>



    @*@Scripts.Render("~/bundles/jquery")

    @Scripts.Render("~/bundles/bootstrap")*@

    @Scripts.Render("~/bundles/lib")

    @RenderSection("scripts", required: false)

</body>

</html>





--above is my Layout.cshtml

above is an excerpt from my index view showing my table with an id(students).

</table>

@section scripts

    {

    <script>

        $(document).ready(function () {

            $("#students").DataTable();



            $("#students").on("click", ".js-delete", function () {

                var button = $(this);

                bootbox.confirm("are you sure you want to delete this customer?", function (result) {

                    if (result) {

                        $.ajax({

                            url: "/Students/delete/" + button.attr("data-student-id"),





                            method: "delete",

                            success: function () {

                                button.Parent("tr").remove();



                            }



                        });

                    }

                });





            });

        });

    </script>

    }

using System.Web;

using System.Web.Optimization;



namespace ContosoSite

{

    public class BundleConfig

    {

        // For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862

        public static void RegisterBundles(BundleCollection bundles)

        {

            bundles.Add(new ScriptBundle("~/bundles/lib").Include(

                 "~/Scripts/bootstrap.js",

                      "~/Scripts/bootbox.js",

                        "~/Scripts/jquery-{version}.js",

                        "~/Scripts/datatables/jquery.datatables.js",

                        "~/Scripts/datatables/datatables.bootstrap.js"));



            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(

                        "~/Scripts/jquery.validate*"));



            // Use the development version of Modernizr to develop with and learn from. Then, when you're

            // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.

            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(

                        "~/Scripts/modernizr-*"));





            bundles.Add(new StyleBundle("~/Content/css").Include(

                      "~/Content/bootstrap.css",

                      "~/Content/datatables/css/datatables.bootstrap.css",

                      "~/Content/site.css"));

        }

    }

}





above is my BundleConfig file

edited Nov 26 '18 at 10:02

asked Nov 25 '18 at 19:44

uchenna

Can you add a snapshot for reference which is old grid design and what new you want?

– Saineshwar
Nov 26 '18 at 3:25

did you check that the js and css render correctly?

– Mannan Bahelim
Nov 26 '18 at 9:28

@saineshwar i have added both images. one showing the way the grid is presently, the other showing what i expect it to be after applying the codes

– uchenna
Nov 26 '18 at 10:05

@Mannan Bahelim i think so

– uchenna
Nov 26 '18 at 10:05

Add these lines to the head section of the Layout page: @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/lib") and move the line @Scripts.Render("~/bundles/bootstrap") to the body like it is now.

– Jaggan_j
Nov 27 '18 at 22:03

add a comment |

i will attach my bundles_config as well as my views (index and Layout)

please help. thanks

<!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>

    @Styles.Render("~/Content/css")

    @Scripts.Render("~/bundles/modernizr")

</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">

                    <li>@Html.ActionLink("Home", "Index", "Home")</li>

                    <li>@Html.ActionLink("About", "About", "Home")</li>

                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>

                </ul>

            </div>

        </div>

    </div>

    <div class="container body-content">

        @RenderBody()

        <hr />

        <footer>

            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>

        </footer>

    </div>



    @*@Scripts.Render("~/bundles/jquery")

    @Scripts.Render("~/bundles/bootstrap")*@

    @Scripts.Render("~/bundles/lib")

    @RenderSection("scripts", required: false)

</body>

</html>





--above is my Layout.cshtml

above is an excerpt from my index view showing my table with an id(students).

</table>

@section scripts

    {

    <script>

        $(document).ready(function () {

            $("#students").DataTable();



            $("#students").on("click", ".js-delete", function () {

                var button = $(this);

                bootbox.confirm("are you sure you want to delete this customer?", function (result) {

                    if (result) {

                        $.ajax({

                            url: "/Students/delete/" + button.attr("data-student-id"),





                            method: "delete",

                            success: function () {

                                button.Parent("tr").remove();



                            }



                        });

                    }

                });





            });

        });

    </script>

    }

using System.Web;

using System.Web.Optimization;



namespace ContosoSite

{

    public class BundleConfig

    {

        // For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862

        public static void RegisterBundles(BundleCollection bundles)

        {

            bundles.Add(new ScriptBundle("~/bundles/lib").Include(

                 "~/Scripts/bootstrap.js",

                      "~/Scripts/bootbox.js",

                        "~/Scripts/jquery-{version}.js",

                        "~/Scripts/datatables/jquery.datatables.js",

                        "~/Scripts/datatables/datatables.bootstrap.js"));



            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(

                        "~/Scripts/jquery.validate*"));



            // Use the development version of Modernizr to develop with and learn from. Then, when you're

            // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.

            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(

                        "~/Scripts/modernizr-*"));





            bundles.Add(new StyleBundle("~/Content/css").Include(

                      "~/Content/bootstrap.css",

                      "~/Content/datatables/css/datatables.bootstrap.css",

                      "~/Content/site.css"));

        }

    }

}





above is my BundleConfig file

edited Nov 26 '18 at 10:02

asked Nov 25 '18 at 19:44

uchenna

i will attach my bundles_config as well as my views (index and Layout)

please help. thanks

<!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>

    @Styles.Render("~/Content/css")

    @Scripts.Render("~/bundles/modernizr")

</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">

                    <li>@Html.ActionLink("Home", "Index", "Home")</li>

                    <li>@Html.ActionLink("About", "About", "Home")</li>

                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>

                </ul>

            </div>

        </div>

    </div>

    <div class="container body-content">

        @RenderBody()

        <hr />

        <footer>

            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>

        </footer>

    </div>



    @*@Scripts.Render("~/bundles/jquery")

    @Scripts.Render("~/bundles/bootstrap")*@

    @Scripts.Render("~/bundles/lib")

    @RenderSection("scripts", required: false)

</body>

</html>





--above is my Layout.cshtml

above is an excerpt from my index view showing my table with an id(students).

</table>

@section scripts

    {

    <script>

        $(document).ready(function () {

            $("#students").DataTable();



            $("#students").on("click", ".js-delete", function () {

                var button = $(this);

                bootbox.confirm("are you sure you want to delete this customer?", function (result) {

                    if (result) {

                        $.ajax({

                            url: "/Students/delete/" + button.attr("data-student-id"),





                            method: "delete",

                            success: function () {

                                button.Parent("tr").remove();



                            }



                        });

                    }

                });





            });

        });

    </script>

    }

using System.Web;

using System.Web.Optimization;



namespace ContosoSite

{

    public class BundleConfig

    {

        // For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862

        public static void RegisterBundles(BundleCollection bundles)

        {

            bundles.Add(new ScriptBundle("~/bundles/lib").Include(

                 "~/Scripts/bootstrap.js",

                      "~/Scripts/bootbox.js",

                        "~/Scripts/jquery-{version}.js",

                        "~/Scripts/datatables/jquery.datatables.js",

                        "~/Scripts/datatables/datatables.bootstrap.js"));



            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(

                        "~/Scripts/jquery.validate*"));



            // Use the development version of Modernizr to develop with and learn from. Then, when you're

            // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.

            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(

                        "~/Scripts/modernizr-*"));





            bundles.Add(new StyleBundle("~/Content/css").Include(

                      "~/Content/bootstrap.css",

                      "~/Content/datatables/css/datatables.bootstrap.css",

                      "~/Content/site.css"));

        }

    }

}





above is my BundleConfig file

<!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>

    @Styles.Render("~/Content/css")

    @Scripts.Render("~/bundles/modernizr")

</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">

                    <li>@Html.ActionLink("Home", "Index", "Home")</li>

                    <li>@Html.ActionLink("About", "About", "Home")</li>

                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>

                </ul>

            </div>

        </div>

    </div>

    <div class="container body-content">

        @RenderBody()

        <hr />

        <footer>

            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>

        </footer>

    </div>



    @*@Scripts.Render("~/bundles/jquery")

    @Scripts.Render("~/bundles/bootstrap")*@

    @Scripts.Render("~/bundles/lib")

    @RenderSection("scripts", required: false)

</body>

</html>





--above is my Layout.cshtml

<!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>

    @Styles.Render("~/Content/css")

    @Scripts.Render("~/bundles/modernizr")

</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">

                    <li>@Html.ActionLink("Home", "Index", "Home")</li>

                    <li>@Html.ActionLink("About", "About", "Home")</li>

                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>

                </ul>

            </div>

        </div>

    </div>

    <div class="container body-content">

        @RenderBody()

        <hr />

        <footer>

            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>

        </footer>

    </div>



    @*@Scripts.Render("~/bundles/jquery")

    @Scripts.Render("~/bundles/bootstrap")*@

    @Scripts.Render("~/bundles/lib")

    @RenderSection("scripts", required: false)

</body>

</html>





--above is my Layout.cshtml

above is an excerpt from my index view showing my table with an id(students).

</table>

@section scripts

    {

    <script>

        $(document).ready(function () {

            $("#students").DataTable();



            $("#students").on("click", ".js-delete", function () {

                var button = $(this);

                bootbox.confirm("are you sure you want to delete this customer?", function (result) {

                    if (result) {

                        $.ajax({

                            url: "/Students/delete/" + button.attr("data-student-id"),





                            method: "delete",

                            success: function () {

                                button.Parent("tr").remove();



                            }



                        });

                    }

                });





            });

        });

    </script>

    }

above is an excerpt from my index view showing my table with an id(students).

</table>

@section scripts

    {

    <script>

        $(document).ready(function () {

            $("#students").DataTable();



            $("#students").on("click", ".js-delete", function () {

                var button = $(this);

                bootbox.confirm("are you sure you want to delete this customer?", function (result) {

                    if (result) {

                        $.ajax({

                            url: "/Students/delete/" + button.attr("data-student-id"),





                            method: "delete",

                            success: function () {

                                button.Parent("tr").remove();



                            }



                        });

                    }

                });





            });

        });

    </script>

    }

using System.Web;

using System.Web.Optimization;



namespace ContosoSite

{

    public class BundleConfig

    {

        // For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862

        public static void RegisterBundles(BundleCollection bundles)

        {

            bundles.Add(new ScriptBundle("~/bundles/lib").Include(

                 "~/Scripts/bootstrap.js",

                      "~/Scripts/bootbox.js",

                        "~/Scripts/jquery-{version}.js",

                        "~/Scripts/datatables/jquery.datatables.js",

                        "~/Scripts/datatables/datatables.bootstrap.js"));



            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(

                        "~/Scripts/jquery.validate*"));



            // Use the development version of Modernizr to develop with and learn from. Then, when you're

            // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.

            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(

                        "~/Scripts/modernizr-*"));





            bundles.Add(new StyleBundle("~/Content/css").Include(

                      "~/Content/bootstrap.css",

                      "~/Content/datatables/css/datatables.bootstrap.css",

                      "~/Content/site.css"));

        }

    }

}





above is my BundleConfig file

using System.Web;

using System.Web.Optimization;



namespace ContosoSite

{

    public class BundleConfig

    {

        // For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862

        public static void RegisterBundles(BundleCollection bundles)

        {

            bundles.Add(new ScriptBundle("~/bundles/lib").Include(

                 "~/Scripts/bootstrap.js",

                      "~/Scripts/bootbox.js",

                        "~/Scripts/jquery-{version}.js",

                        "~/Scripts/datatables/jquery.datatables.js",

                        "~/Scripts/datatables/datatables.bootstrap.js"));



            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(

                        "~/Scripts/jquery.validate*"));



            // Use the development version of Modernizr to develop with and learn from. Then, when you're

            // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.

            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(

                        "~/Scripts/modernizr-*"));





            bundles.Add(new StyleBundle("~/Content/css").Include(

                      "~/Content/bootstrap.css",

                      "~/Content/datatables/css/datatables.bootstrap.css",

                      "~/Content/site.css"));

        }

    }

}





above is my BundleConfig file

jquery asp.net-mvc asp.net-mvc-4 datatables

edited Nov 26 '18 at 10:02

asked Nov 25 '18 at 19:44

uchenna

edited Nov 26 '18 at 10:02

asked Nov 25 '18 at 19:44

uchenna

edited Nov 26 '18 at 10:02

asked Nov 25 '18 at 19:44

uchenna

asked Nov 25 '18 at 19:44

uchenna

asked Nov 25 '18 at 19:44

uchenna

Can you add a snapshot for reference which is old grid design and what new you want?

– Saineshwar
Nov 26 '18 at 3:25

did you check that the js and css render correctly?

– Mannan Bahelim
Nov 26 '18 at 9:28

@saineshwar i have added both images. one showing the way the grid is presently, the other showing what i expect it to be after applying the codes

– uchenna
Nov 26 '18 at 10:05

@Mannan Bahelim i think so

– uchenna
Nov 26 '18 at 10:05

Add these lines to the head section of the Layout page: @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/lib") and move the line @Scripts.Render("~/bundles/bootstrap") to the body like it is now.

– Jaggan_j
Nov 27 '18 at 22:03

add a comment |

Can you add a snapshot for reference which is old grid design and what new you want?

– Saineshwar
Nov 26 '18 at 3:25

did you check that the js and css render correctly?

– Mannan Bahelim
Nov 26 '18 at 9:28

@saineshwar i have added both images. one showing the way the grid is presently, the other showing what i expect it to be after applying the codes

– uchenna
Nov 26 '18 at 10:05

@Mannan Bahelim i think so

– uchenna
Nov 26 '18 at 10:05

Add these lines to the head section of the Layout page: @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/lib") and move the line @Scripts.Render("~/bundles/bootstrap") to the body like it is now.

– Jaggan_j
Nov 27 '18 at 22:03

Can you add a snapshot for reference which is old grid design and what new you want?

– Saineshwar
Nov 26 '18 at 3:25

did you check that the js and css render correctly?

– Mannan Bahelim
Nov 26 '18 at 9:28

@saineshwar i have added both images. one showing the way the grid is presently, the other showing what i expect it to be after applying the codes

– uchenna
Nov 26 '18 at 10:05

@Mannan Bahelim i think so

– uchenna
Nov 26 '18 at 10:05

Add these lines to the head section of the Layout page: @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/lib") and move the line @Scripts.Render("~/bundles/bootstrap") to the body like it is now.

– Jaggan_j
Nov 27 '18 at 22:03

add a comment |

0

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53471213%2fdatatables-css-jquery-scripts-not-modifying-my-tables%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

0

active

oldest

votes

0

active

oldest

votes

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Btukfyl