Раскрывающийся список для опции выбора в DataTable не работает, как решить эту проблему на моем JqueryUI?

Question

У меня есть этот код ниже, я хочу иметь опции выбора для столбцов «WhoAttend» и «Description», поэтому я реализовал некоторые выпадающие списки, используя рендер, и это было неудачно до сегодняшнего дня. Любая помощь будет высоко оценена, спасибо товарищам и просмотрели документацию по DataTable. net, но я не смог понять это правильно. Конечно, я как-то упускаю немного логи c, и мне нужно некоторое руководство к этой логи c ниже.

<h2>EventManagement List</h2>
<table id="EventsManagementsTable" class="cell-border" style="width:100%">


    <thead>
        <tr>

            <th>TrainingType</th>
            <th>TrainingDescription</th>
            <th>Price</th>
            <th>Venue</th>
            <th>Facilitator</th>
            <th>WhoAttend</th>
            <th>RSVP</th>
        </tr>
    </thead>


</table>


@section scripts{

    <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>


    <script>

        $(document).ready(function () {

            $("#EventsManagementsTable").DataTable({

                "columns": [
                    {
                        "data": "WhoAttend",
                        "name": "WhoAttend",
                        "render": function (value) {
                            return $("<select/>")
                                .addClass("form-control")
                                .attr("name", "WhoAttend")
                                .append($("<option/>").text("Engineers"))
                                .append($("<option/>").text("Inspectors"))
                                .append($("<option/>").text("Technicians"))
                                .val(value)
                                .html();
                        }
                    }

                ],

                "serverSide": "true",
                "order": [0, "asc"],
                "processing": "true",
                "paginng": true,
                "ordering":true,
                "language": {
                    "processing": "processing...... please wait"
                },

                "ajax": {
                    "url": "/Dashboard/GetData",
                    "type": "POST",
                    "datatype": "JSON"


                },
                "columns": [
                    { "data": "TrainingType", "name": "TrainingType", "autoWidth": true },
                    { "data": "TrainingDescription", "name": "TrainingDescription", "autoWidth": true },
                    { "data": "Price", "name": "Price", "autoWidth": true },
                    { "data": "Venue", "name": "Venue", "autoWidth": true },
                    { "data": "Facilitator", "name": "Facilitator", "autoWidth": true },
                    { "data": "WhoAttend", "name": "WhoAttend", "autoWidth": true },
                    { "data": "RSVP", "name": "RSVP", "autoWidth": true },

                ]

            });

        });

    </script>

// Remodified code
        $(document).ready(function () {

            $("#EventsManagementsTable").DataTable({

                /*"columns": [
                    {
                        "data": "WhoAttend",
                        "name": "WhoAttend",
                        "render": function (value) {
                            return $("<select/>")
                                .addClass("form-control")
                                .attr("name", "WhoAttend")
                                .append($("<option/>").text("Engineers"))
                                .append($("<option/>").text("Inspectors"))
                                .append($("<option/>").text("Technicians"))
                                .val(value)
                                .html();
                        }
                    }

                ],
                */
                  "columns": [
                    { "data": "TrainingType", "name": "trainingType", "autoWidth": true },
                    { "data": "TrainingDescription", "name": "trainingDescription", "autoWidth": true },
                    { "data": "Price", "name": "price", "autoWidth": true },
                    { "data": "Venue", "name": "venue", "autoWidth": true },
                    { "data": "Facilitator", "name": "facilitator", "autoWidth": true },
                    { "data": "WhoAttend", "name": "whoAttend", "autoWidth": true },
                    { "data": "RSVP", "name": "rsvp", "autoWidth": true },



                ],

                "serverSide": "true",
                "order": [0, "asc"],
                "processing": "true",
                "paging": true,
                "ordering":true,
                "language": {
                    "processing": "processing...... please wait"
                },

                "ajax": {
                    "url": "/Dashboard/GetData",
                    "type": "POST",
                    "datatype": "JSON"


                }

            });

        });

    </script>

Answer 1

Не зная больше о проблеме, я бы дал вам несколько вещей:

1. Вы определяете определение "столбцы" дважды. Один раз выше и один раз ниже. Скорее всего, он возьмет значение второго и перезапишет первое, которое вы определили вверху, поэтому поместите верхнее в остальное внизу и решите, хотите ли вы его переопределить.

2. Простая вещь - пейджинг написан с ошибкой, может быть:

   "paginng": true,

Изменить на "пейджинг"

Подтвердить, что указанные значения для данных, таких как "TrainingType", такие же, как в наборе данных, возвращенных в JSON с сервера? Например, это так:

{"trainingType": {значение}, "trainingDescription": {значение}, "цена": {значение}, "место проведения": {значение}, " фасилитатор ": {value}," whoAttend ": {value}," rsvp ": {value}}

Я спрашиваю только потому, что часто JSON данные возвращаются в случае верблюда, поэтому было бы хорошо проверить если код таблицы данных чувствителен к регистру?

Редактировать: Ах, я вижу, что происходит, это то, что он не любит делать выбор. Я не помню, каково было обоснование этого, но в любом случае вот код, который будет работать.

$(document).ready(function () {
    $("#EventsManagementsTable").DataTable({
        "serverSide": "true",
        "order": [0, "asc"],
        "processing": "true",
        "paging": true,
        "ordering":true,
        "language": {
            "processing": "processing...... please wait"
        },
        "ajax": {
            "url": "/Dashboard/GetData",
            "type": "GET",
            "datatype": "JSON"
        },
        "columns": [
            { "data": "trainingType", "name": "TrainingType", "autoWidth": true },
            { "data": "trainingDescription", "name": "TrainingDescription", "autoWidth": true },
            { "data": "price", "name": "Price", "autoWidth": true },
            { "data": "venue", "name": "Venue", "autoWidth": true },
            { "data": "facilitator", "name": "Facilitator", "autoWidth": true },
            {
                "data": "whoAttend",
                "name": "WhoAttend",
                "render": function (value) {
                    var sel = $('<select />')
                         .addClass("form-control")
                         .attr("name", "WhoAttend")
                         .append($("<option/>", { text: "Engineers", value: "Engineers" }))
                         .append($("<option/>", { text: "Inspectors", value: "Inspectors" }))
                         .append($("<option/>", { text: "Technicians", value: "Technicians" }))[0];

                    $(sel.options).each(function() {
                        if(this.value === value) {
                            $(this).attr("selected",true);
                        }
                    });

                    return sel.outerHTML;
                },
                "autoWidth": true
            },
            { "data": "rsvp", "name": "RSVP", "autoWidth": true }
        ]
    });
});

PS Не держите часть [0] этой одной строки против меня. Оно работает. ;-) Может быть, вы могли бы сказать мне, почему это так работает. Я помню, как нечто подобное происходило раньше, и кто-то сказал мне, почему val () не выбирает и почему создание select портит и более правильный способ сделать это, но я не помню, что это было сейчас. В любом случае приведенный выше код наверняка должен работать сейчас наверняка.