在Asp.Net Core MVC中使用JavaScript加载DataTable的问题

Question

我正在尝试创建link中教授的分页，但我在加载DataTable时遇到问题。

在教程中教你使用两个动作索引，但只有第一个正在工作并加载DataTable头。剩余不起作用。

我不知道我的javascript脚本有什么问题... 每当我刷新页面时，它都不能调用返回String Jason的Action Index。它总是调用Index u并返回一个View ... 有谁知道如何帮助我？

感谢和问候所有人！

//我的存储库

public IQueryable<PessoaSituacao> GetPaginated(string filter, int initialPage, int pageSize, out int totalRecords, out int recordsFiltered)
        {
            var data = Db.PessoaSituacao.AsQueryable();
            totalRecords = data.Count();

            if (!string.IsNullOrEmpty(filter))
            {
                data = data.Where(x => x.Descricao.ToUpper().Contains(filter.ToUpper()));
            }

            recordsFiltered = data.Count();

            data = data
                .OrderBy(x => x.Descricao)
                .Skip(initialPage * pageSize)
                .Take(pageSize);

            return data;
        }

//我的控制器

[HttpGet]
        [AllowAnonymous]
        [Route("situacoes-gerenciamento/listar-todos")]
        public IActionResult Index()
        {
            return View();
        }

        [HttpPost]
        [AllowAnonymous]
        [Route("situacoes-gerenciamento/listar-todos")]
        public string Index(int? draw, int? start, int? lenght)
        {
            var search = Request.Form["search[value]"];
            var totalRecords = 0;
            var recordsFiltered = 0;
            start = start.HasValue ? start / 10 : 0;

            var pessoasSituacoes = _pessoaSituacaoAppService.GetPaginated(search, start.Value, lenght ?? 10, out totalRecords, out recordsFiltered);

            return JsonConvert.SerializeObject(pessoasSituacoes);
        }

//我的视图索引（DataTable）

<table id="dtPrincipal" data-url="@Url.Action("situacoes-gerenciamento/listar-todos")" class="table table-hover table-bordered dataTable table-striped width-full center-header table-responsive" cellpadding="0">
            <thead>
                <tr>
                    <th>
                        Id
                    </th>
                    <th>
                        Descrição
                    </th>
                    <th>
                        Tipo de Pessoa
                    </th>
                    <th>
                        Ações
                    </th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>

<script type="text/javascript">

        $(document).read(function () {
            dataTable.getData();
        });

        var dataTable = {
            table = null,
            initializeDataTable: function () {
                var $tabela = $(".table-striped");

                dataTable.table = $tabela.DataTable({
                    processing: true,
                    serverSide: true,
                    "aLenghtMenu": [[10, 25, 50, 100], [10, 25, 50, 100]],
                    ajax:
                    {
                        url: $tabela.prop("data-url"),
                        type: "POST"
                    }
                    , "columns": [
                        { "data": "Id" },
                        { "data": "Descricao" },
                        { "data": "PessoaTipo" },
                        { "data": "PadraoSistema" },
                    ],
                    "columnDefs": [
                        {
                            "render": function (data, type, row) {
                                var inner = '<div class="btn-group">' +
                                    '<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' +
                                    'Actions' +
                                    '</button>' +
                                    '<div class="dropdown-menu">' +
                                    '<a class="dropdown-item btn btn-default edit data-id"' + row.Id + '" href="#"> Edit </a>' +
                                    '<a class="dropdown-item btn btn-danger delete data-id"' + row.Id + '" href="#"> Delete </a>' +
                                    '</div>' +
                                    '</div>';

                                return inner;
                            },
                            "targets": -1
                        }
                    ],
                    "pagingType": "full_numbers"
                });
                dataTable.table.on('draw', function () {
                    $('button[data-type="delete"]').click(function () {
                        var $button = $(this);
                    });
                    $('button[data-type="edit"]').click(function () {

                    });

                });
            },
            getData: function () {
                if (dataTable.table == null)
                    dataTable.initializeDataTable();
                else
                    dataTable.table.ajax.reload();
            }
        }


    </script>