javascript - Datatable search all records on pagination Laravel - Stack Overflow

admin管理员组

文章数量:1123235

I have a Laravel application with a paginated table for leads, and I'm using DataTables for enhanced functionality. While the DataTable works well with pagination for performance, the search functionality only searches the currently loaded page, not across all records in the database.

Here is my LeadController that handles the backend logic for fetching paginated records:

LeadController.php

    public function index()
{
    $users = User::all();

    // Check if a user is authenticated
    if (Auth::check()) {
        // Get the currently authenticated user
        $user = Auth::user();
        
        // Check if the user has the role of 'superadmin'
        if ($user->role === 'superadmin') {
            // Show all leads for superadmin, paginated
            $leads = Lead::latest()->paginate(10); // Change 10 to the number of leads per page
        } else {
            // Filter leads assigned to the current user, paginated
            $leads = Lead::where('lead_user', $user->id)->latest()->paginate(10); // Change 10 as needed
        }
    } else {
        // If no user is authenticated, handle as needed
        $leads = Lead::latest()->paginate(10);  // Change 10 as needed
    }

    return view('leads.index', compact('leads', 'users'));
}

Script.js

  <script>
        // var e;
        c1 = $('#style-1').DataTable({
            headerCallback:function(e, a, t, n, s) {
                e.getElementsByTagName("th")[0].innerHTML=`
                <div class="form-check form-check-primary d-block">
                    <input class="form-check-input chk-parent" type="checkbox" id="form-check-default">
                </div>`
            },
            columnDefs:[ {
                targets:0, width:"30px", className:"", orderable:!1, render:function(e, a, t, n) {
                    return `
                    <div class="form-check form-check-primary d-block">
                        <input class="form-check-input child-chk" type="checkbox" id="form-check-default">
                    </div>`
                }
            }],
            "dom": "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'f>>>" +
        "<'table-responsive'tr>" +
        "<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count  mb-sm-0 mb-3'i><'dt--pagination'p>>",
            "oLanguage": {
                "oPaginate": { "sPrevious": '<svg xmlns="; width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>', "sNext": '<svg xmlns="; width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>' },
                "sInfo": "Showing page _PAGE_ of _PAGES_",
                "sSearch": '<svg xmlns="; width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
                "sSearchPlaceholder": "Search...",
               "sLengthMenu": "Results :  _MENU_",
            },
            "lengthMenu": [5, 10, 20, 50],
            "pageLength": 10
        });

        multiCheck(c1);

       
    </script>

i have tried to use seperate search and it doesnt look good

Using separate search logic by adding an additional backend search endpoint. However, this approach is clunky and doesn’t integrate well with DataTables' built-in search.

I have a Laravel application with a paginated table for leads, and I'm using DataTables for enhanced functionality. While the DataTable works well with pagination for performance, the search functionality only searches the currently loaded page, not across all records in the database.

Here is my LeadController that handles the backend logic for fetching paginated records:

LeadController.php

    public function index()
{
    $users = User::all();

    // Check if a user is authenticated
    if (Auth::check()) {
        // Get the currently authenticated user
        $user = Auth::user();
        
        // Check if the user has the role of 'superadmin'
        if ($user->role === 'superadmin') {
            // Show all leads for superadmin, paginated
            $leads = Lead::latest()->paginate(10); // Change 10 to the number of leads per page
        } else {
            // Filter leads assigned to the current user, paginated
            $leads = Lead::where('lead_user', $user->id)->latest()->paginate(10); // Change 10 as needed
        }
    } else {
        // If no user is authenticated, handle as needed
        $leads = Lead::latest()->paginate(10);  // Change 10 as needed
    }

    return view('leads.index', compact('leads', 'users'));
}

Script.js

  <script>
        // var e;
        c1 = $('#style-1').DataTable({
            headerCallback:function(e, a, t, n, s) {
                e.getElementsByTagName("th")[0].innerHTML=`
                <div class="form-check form-check-primary d-block">
                    <input class="form-check-input chk-parent" type="checkbox" id="form-check-default">
                </div>`
            },
            columnDefs:[ {
                targets:0, width:"30px", className:"", orderable:!1, render:function(e, a, t, n) {
                    return `
                    <div class="form-check form-check-primary d-block">
                        <input class="form-check-input child-chk" type="checkbox" id="form-check-default">
                    </div>`
                }
            }],
            "dom": "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'f>>>" +
        "<'table-responsive'tr>" +
        "<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count  mb-sm-0 mb-3'i><'dt--pagination'p>>",
            "oLanguage": {
                "oPaginate": { "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>', "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>' },
                "sInfo": "Showing page _PAGE_ of _PAGES_",
                "sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
                "sSearchPlaceholder": "Search...",
               "sLengthMenu": "Results :  _MENU_",
            },
            "lengthMenu": [5, 10, 20, 50],
            "pageLength": 10
        });

        multiCheck(c1);

       
    </script>

i have tried to use seperate search and it doesnt look good

Using separate search logic by adding an additional backend search endpoint. However, this approach is clunky and doesn’t integrate well with DataTables' built-in search.

• javascript
• php
• ajax
• laravel
• datatable

Share Improve this question Follow asked 9 hours ago Jury FabriceJury Fabrice 1 New contributor Jury Fabrice is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct. 1

• here is the link of package i use datatables.net – Jury Fabrice Commented 9 hours ago

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

• You need to use serverSide feature check this https://datatables.net/manual/server-side
• Or you can use YarjaDatatable which will handle all functions

本文标签： javascriptDatatable search all records on pagination LaravelStack Overflow