Я хочу продублировать таблицу, используя js в моем проекте asp, но застрял здесь

Question

Я уже создал таблицу, но теперь я хочу создать еще одну таблицу ниже. В этой таблице данные таблицы будут такими же, как и раньше (все данные столбца строки будут такими же), для которой я включил js в моем проекте я использовал ajax, где я могу получить мгновенный результат. Итак, вот мой код js:

var dataTable;

$(document).ready(function () {
    loadDataTable();
});

function loadDataTable() {
    dataTable = $('#DT_load').DataTable({
        "ajax": {
            "url": "/api/book",
            "type": "GET",
            "datatype": "json"
        },    
        "columns": [
            { "data": "Name", "width": "30%" },
            { "data": "Author", "width": "30%" },
            { "data": "ISBN", "width": "30%" },
            {
                "data": "id",
                "render": function (data) {
                    return `<div class= "text-center">
                        <a href="/BookList/Edit?id=${data}" class='btn btn-success text-white' style= 'cursor:pointer; width: 100px;'>Edit</a>
                        @nbsp
                        <a class='btn btn-success text-white' style= 'cursor:pointer; width: 100px;' onClick=Delete('/api/book?id='+${data})>Delete</a>        
                    </div>`
                    "width" : "30%"
                },
            }
        ],
        "language": {
            "emptyTable": "No Data Found"
        },
        "width": "100%"
    })
}


function Delete(url) {
    swal({
        title: "Are You Sure?",
        text: "Once Deleted You cant never Find it again !",
        icon: "warning",
        dangerMode: true
    }).then((willDelete) => {
        if (willDelete) {
            $.ajax({
                type: "DELETE",
                url: url,
                success: function (data) {
                    if (data.success) {
                        toastr.success(message);
                        dataTable.ajax.reload();
                    }

                    else {
                        toastr.error(message);
                    }
                }
            });
        }
    });
}

Таблица, которую я сделал с html css, показывает, но когда я добавьте этот js файл, он должен показать мне дублирующуюся таблицу, которую я сделал раньше, но она не работает

Вот мой индексный файл:

@page
@model Crud_App.indexModel


<br />

<div class="container row p-0 m-0">
    <div class="col-7">
        <h2 class="text-info">Book List</h2>
    </div>
    <div class="col-3">
        <a class="btn btn-info form-control text-center" asp-page="create">Create</a>
    </div>
    <div class="col-12 border p-3 mt-3">
        <form method="post">
            @if (Model.Books.Count() > 0)
            {
                <table class="table table-striped border">
                    <tr class="table-secondary">
                        <th>
                            <label asp-for="Books.FirstOrDefault().Name"></label>
                        </th>
                        <th>
                            <label asp-for="Books.FirstOrDefault().Author"></label>
                        </th>
                        <th>
                            <label asp-for="Books.FirstOrDefault().ISBN"></label>
                        </th>
                    </tr>
                    @foreach (var item in Model.Books)
                    {
                <tr>
                    <td>
                        @Html.DisplayFor(m => item.Name)
                    </td>
                    <td>
                        @Html.DisplayFor(m => item.Author)
                    </td>
                    <td>
                        @Html.DisplayFor(m => item.ISBN)
                    </td>
                    <td>
                        <a asp-page="Edit" asp-route-id="@item.Id" class="btn btn-success btn-sm">Edit</a>
                        <button asp-page-handler="Delete" asp-route-id="@item.Id" onclick="return confirm('Are you Sure You want to delete')" class="btn btn-danger btn-sm">Delete</button>
                    </td>
                </tr>
                    }

                </table>
            }
            else
            {
                <p>No Books Available</p>
            }


        </form>
    </div>

    <div class="col-12" style="text-align: center">
        <br />
        <span class="h3 text-info">OR</span>
        <br/>
        <div class="col-12 border p-3">
            <table id="DT_load" class="table table-stripped table-bordered" style="width: 100%">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Atuhor</th>
                        <th>ISBN</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

@section scripts {
    <script src ="~/js/BookList.js"></script>
}

Answer 1

Я сделал это вот так,

В DataTable я добавил

1. dataSr c
2. columnDefs

In HTML, я добавил

1. 4-й заголовок таблицы

В бэкэнд-контроллере я возвращаю именованный массив booksData в DataTable ajax call

@section scripts {
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
    <script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <script>

        $(document).ready(function () {
            $('#DT_load').DataTable({
                "ajax": {
                    "url": "https://localhost:44333/Home/Data",
                    "type": "GET",
                    "datatype": "json",
                    "dataSrc": "booksData"
                },
                "columns": [
                    { "data": "name", "width": "30%" },
                    { "data": "author", "width": "30%" },
                    { "data": "isbn", "width": "30%" },
                    { "data": "id", "width": "10%" }
                ],
                "columnDefs": [
                    {
                        "targets": 3,
                        "data": "id",
                        "render": function (data) {
                            return '<a href="' + data + '">Download</a>';
                        }
                    }
                ],
                "language": {
                    "emptyTable": "No Data Found"
                },
                "width": "100%"
            });
        });
    </script>
}

@if (Model.Count() > 0)
    {
        <table class="table table-striped border">
            <tr class="table-secondary">
                <th>
                    <label>@Model.First().Name</label>
                </th>
                <th>
                    <label>@Model.First().Author</label>
                </th>
                <th>
                    <label>@Model.First().ISBN</label>
                </th>
            </tr>
            @foreach (var item in Model)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(m => item.Name)
                    </td>
                    <td>
                        @Html.DisplayFor(m => item.Author)
                    </td>
                    <td>
                        @Html.DisplayFor(m => item.ISBN)
                    </td>
                    <td>
                        <a asp-route-id="@item.Id" class="btn btn-success btn-sm">Edit</a>
                    </td>
                </tr>
            }

        </table>

        <div class="col-12" style="text-align: center">
            <br />
            <span class="h3 text-info">OR</span>
            <br />
            <div class="col-12 border p-3">
                <table id="DT_load" class="table table-stripped table-bordered" style="width: 100%">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Atuhor</th>
                            <th>ISBN</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    }
    else
    {
        <p>No Books Available</p>
    }

public class HomeController : Controller
    {
        public IActionResult Index()
        {
            var books = new List<Book> { new Book { Id=1, Name="Abcd", Author="Xyz", ISBN="1234" },
            new Book { Id=2, Name="Efgh", Author="Igm", ISBN="7896" },
            new Book { Id=3, Name="Qrty", Author="Ght", ISBN="8791" },};

            return View(books);
        }

        public IActionResult Data()
        {
            var books = new List<Book> { new Book { Id=1, Name="Abcd", Author="Xyz", ISBN="1234" },
            new Book { Id=2, Name="Efgh", Author="Igm", ISBN="7896" },
            new Book { Id=3, Name="Qrty", Author="Ght", ISBN="8791" },};

            return Json(new { booksData = books });
        }