Ошибка: не удается прочитать свойство 'style' из неопределенного

Question

Я пытаюсь загрузить таблицу данных с помощью ajax-вызова контроллера.во время вызова ajax ..it выполнит и вернет данные, но в консоли это выдаст мне ошибку типа «Невозможно прочитать свойство 'style' of undefined».

я пытаюсь выполнить следующий код

        var editor; // use a global for the submit and return data rendering in the examples

        //$(document).ready(function () {
        debugger;
        editor = new $.fn.dataTable.Editor({
            ajax: "PRC/PRCGenerate",
            table: "#example",
            fields: [{
                label: "PQTY",
                name: "PQTY"
            }, {
                label: "PRCReadyDT",
                name: "PRCReadyDT"
            }, {
                label: "REMARKS:",
                name: "REMARKS"
            }
            ]
        });

        // Activate an inline edit on click of a table cell
        $('#example').on('click', 'tbody td.editable', function (e) {
            editor.inline(this);
        });

        $('#example').DataTable({
            dom: 'Bfrtip',
            ajax: 'PRC/PRCGenerate',
            columns: [
                {
                    data: null,
                    defaultContent: '',
                    className: 'select-checkbox',
                    orderable: false
                },
                { data: 'OANO' },
                { data: 'ID' },
                { data: 'PONO' },
                { data: 'POLI' },
                { data: 'MOULDCODE' },
                { data: 'DESCRIPTION' },
                { data: 'Drg' },
                { data: 'Rev' },
                { data: 'METALCODE' },
                { data: 'METALNAME' },
                { data: 'WEIGHT' },
                { data: 'QTY' },
                { data: 'PQTY', className: 'editable' },
                { data: 'Machining' },
                { data: 'PRC' },
                { data: 'DELIVERYDT' },
                { data: 'PRCReadyDT', className: 'editable' },
                { data: 'PRCNO' },
                { data: 'REMARKS', className: 'editable' }
                //render: $.fn.dataTable.render.number(',', '.', 0, '$'),
            ],
            select: {
                style: 'os',
                selector: 'td:first-child'
            },
            buttons: [
                { extend: 'create', editor: editor },
                { extend: 'edit', editor: editor },
                { extend: 'remove', editor: editor }
            ]
        });
        //});

<script src="https://cdn.datatables.net/select/1.2.7/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.7/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.4/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
@model IEnumerable<RedICMVC.Models.sp_PRC_Record_Result>
<div class="card">
    <table id="example" class="table display">
        <thead>
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.OANO)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.ID)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.PONO)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.POLI)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.MOULDCODE)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.DESCRIPTION)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Drg)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Rev)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.METALCODE)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.METALNAME)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.WEIGHT)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.QTY)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.PQTY)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Machining)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.PRC)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.DELIVERYDT)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.PRCReadyDT)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.PRCNO)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.REMARKS)
                </th>
            </tr>
        </thead>
    </table>
</div>

И вывод, показанный так с ошибкой Как я могу решить эту проблему?Пожалуйста, помогите мне .. спасибо заранее. :-)

Answer 1

Похоже, вы пытаетесь запросить элементы td до того, как они были созданы dataTables.Вы можете добавить любой код, который необходимо запустить после генерации таблицы, в обратный вызов initComplete, например:

$('#example').DataTable({
        dom: 'Bfrtip',
        ajax: 'PRC/PRCGenerate',
        columns: [
            {
                data: null,
                defaultContent: '',
                className: 'select-checkbox',
                orderable: false
            },
            { data: 'OANO' },
            { data: 'ID' },
            { data: 'PONO' },
            { data: 'POLI' },
            { data: 'MOULDCODE' },
            { data: 'DESCRIPTION' },
            { data: 'Drg' },
            { data: 'Rev' },
            { data: 'METALCODE' },
            { data: 'METALNAME' },
            { data: 'WEIGHT' },
            { data: 'QTY' },
            { data: 'PQTY', className: 'editable' },
            { data: 'Machining' },
            { data: 'PRC' },
            { data: 'DELIVERYDT' },
            { data: 'PRCReadyDT', className: 'editable' },
            { data: 'PRCNO' },
            { data: 'REMARKS', className: 'editable' }
            //render: $.fn.dataTable.render.number(',', '.', 0, '$'),
        ],
        select: {
            style: 'os',
            selector: 'td:first-child'
        },
        buttons: [
            { extend: 'create', editor: editor },
            { extend: 'edit', editor: editor },
            { extend: 'remove', editor: editor }
        ],
        initComplete: function () {
            editor = new $.fn.dataTable.Editor({
                ajax: "PRC/PRCGenerate",
                table: "#example",
                fields: [{
                    label: "PQTY",
                    name: "PQTY"
                }, {
                    label: "PRCReadyDT",
                    name: "PRCReadyDT"
                }, {
                    label: "REMARKS:",
                    name: "REMARKS"
                }
                ]
            });

            // Activate an inline edit on click of a table cell
            $('#example').on('click', 'tbody td.editable', function (e) {
                editor.inline(this);
            });
        }
    });

Есть несколько других событий, которые вы можете использовать, кроме initComplete, которые могут работать для вашего использования:В этом случае их можно найти здесь .Вы можете также захотеть использовать событие draw вместо этого, в зависимости от того, насколько большой будет ваша таблица и используете ли вы пейджинг.