Hola, he realizado varias pruebas para poder crear una paginación estable ya que tengo cerca de 17.000 datos, pero cuando los cargo no los muestra en la tabla, he intentando de todo, pero me toco dejar los datos con limite de días de creación para que la pagina cargue bien con 800 datos, pero la idea de la aplicación es que por cada pagina muestre los datos que necesite y no muestre todos los que tenemos porque se demoraría mucho en cargar, soy nuevo en el desarrollo de JavaScript.

Este es el código que tengo actualmente par la paginación

Este es el HTML

 <div class="container-fluid">
        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
            <div class="table-responsive">
                <table id="datatable_jornadas" class="table table-sm table-light table-striped table-hover table-responsive table-bordered">
                    <caption>
                        Todas las Jornadas
                    </caption>
                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <a class="nav-link" href="/jornadas/importar/">
                            <button class="button btn1 " id="import"><span>Importar xlsx</span></button>
                        </a>
                        <a class="nav-link" href="/jornadas/exportar/">
                            <button class="button btn1" id="export"><span>Exportar xlsx</span></button>
                        </a>
                    </div>
                    <br>
                    <thead class="table-dark">
                        <tr>
                            <th class="centered">No.</th>
                            <th class="centered">Empleado</th>
                            <th class="centered">Documento</th>
                            <th class="centered">Inicio Jornada</th>
                            <th class="centered">Salida Jornada</th>
                            <th class="centered">Inicio Descan 1</th>
                            <th class="centered">Salida Descan 1</th>
                            <th class="centered">Inicio Descan 2</th>
                            <th class="centered">Salida Descan 2</th>
                            <th class="centered">Jor Legal</th>
                            <th class="centered">Total H</th>
                            <th class="centered">Hor Diu</th>
                            <th class="centered">Hor Noc</th>
                            <th class="centered">Hor Ex Diu</th>
                            <th class="centered">Hor Ex Noc</th>
                            <th class="centered">Hor Diu Fes</th>
                            <th class="centered">Hor Noc Fes</th>
                            <th class="centered">Ex Diu Fes</th>
                            <th class="centered">Ex Noc Fes</th>
                            <th class="centered">Creación</th>
                            <th class="centered">Usuario</th>
                        </tr>
                    </thead>
                    <tbody id="tableBody_jornadas"></tbody>
                </table>
            </div>
        </div>
    </div> 

y este es el js que cree

 $(document).ready(function () {
    $('#datatable_jornadas').DataTable({
        processing: true,
        serverSide: true,
        stateSave: true,
        responsive: true,
        ajax: {
            dataType: "json",
            url: "http://127.0.0.1:8000/lista/jornadas/",
            type: "POST",   
        },
        columns: [
            { "data": "id" },
            { "data": "empleado_nombre" },
            { "data": "empleado_cedula" },
            { "data": "inicio_jornada_global" },
            { "data": "salida_jornada_global" },
            { "data": "inicio_descanso_global" },
            { "data": "salida_descanso_global" },
            { "data": "inicio_descanso_global2" },
            { "data": "salida_descanso_global2" },
            { "data": "jornada_legal" },
            { "data": "total_horas" },
            { "data": "diurnas_totales" },
            { "data": "nocturnas_totales" },
            { "data": "extras_diurnas_totales" },
            { "data": "extras_nocturnos_totales" },
            { "data": "diurnos_festivo_totales" },
            { "data": "nocturnos_festivo_totales" },
            { "data": "extras_diurnos_festivo_totales" },
            { "data": "extras_nocturnos_festivo_totales" },
            { "data": "fh_transaccion" },
            { "data": "user_id" },
        ],
        columnDefs: [
            {
                className: "centered",
                targets: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21]
            },
            { orderable: false, targets: [21] },
            { searchable: false, targets: [0, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 19, 20, 21] }
        ],
        paging: true,
        pageLength: 50,
        language: {
            search: "Buscar:",
            lengthMenu: "Mostrar _MENU_ registros",
            info: "Mostrando _START_ a _END_ de _TOTAL_ registros",
            infoEmpty: "Mostrando 0 a 0 de 0 registros",
            infoFiltered: "(filtrado de _MAX_ registros en total)",
            paginate: {
                first: "Primero",
                last: "Último",
                next: "Siguiente",
                previous: "Anterior",


            },
        },
    });
});  

Con esto se supone que me debería mostrar los datos pero no entiendo que falta para mostrarlos, ya que se queda cargando y no muestra nada.
Quedo atento con su colaboración, muchas gracias.