I need to use multi pagination for one Table inside one method.

@jlrdw Thanks a Lot

Excuse Me To Please Can You guide me How To let This paginations working without Refresh The Page and The content updated dynamically I am using just jquery and ajax with laravel 11@jlrdw

@salahaldain-abduljalil In a server fetched partial I use an object, but an iframe would also work.

            <div id="myModal" class="modal">


                <div class="modal-content" style="width: 70%;" id="somediv" title="this is a dialog">
                    <span id="modalspan" class="close" onclick="closeModal()" >&times;</span>
                    <object style="width: 98%; margin: auto;" id="thedialog" height="300"></object>
                </div>

            </div>

But there is a learning curve, you have to learn how to handle a table row click, etc. I don't what what you are doing with the tables.

Just an older example, I use axios js now:

    $(document).ready(function () {

        $("#checktable td:nth-child(1)").click(function (event)
        {
            event.preventDefault();
            $("#cedit").css({"position": "absolute", "display": "block", "width": "100%", "background-color": "#FFF", top: event.pageY - 16, left: 0});
            var $td = $(this).closest('tr').children('td');
            var tid = $td.eq(0).text();
            var tdate = $td.eq(1).text();
            var tdescribe = $td.eq(2).text();
            var wd = $td.eq(3).text();
            var dep = $td.eq(4).text();
            var tisclr = $td.eq(5).find(":checkbox").is(':checked')
            $('#checkid').val(tid);
            $('#transdate').val(tdate);
            $('#transdescribe').val(tdescribe);
            $('#wd').val(wd);
            $('#dep').val(dep);
            if ($td.eq(5).find(":checkbox").is(':checked'))
            {
                $('#tisclr').prop('checked', true); // checked
            } else
            {
                $('#tisclr').prop('checked', false); // unchecked
            }
            

        }); 

/// much more code  and functions depending on what you are doing with the table.

But you need to go through a steep learning cure here, it takes a while to learn all the things.

Go here and lookup stuff:

https://developer.mozilla.org/en-US/

But two server fetched partials would do what you need.

With the lengthaware paginators technique it is a full page reload, but a server fetched partial only renews the table in the partial. The rest of the page remains the same.

Edit:

Also a modal isn't required for server fetched partials, but just style as needed.

it's just js without any api calls@Jonjie But I don't have Tables I have just cards For Every Tab when I click For Example page two The Page reload and then it give me page 2 content I need to make This content updated without refresh The page means By ajax Request For This code I hope You get my point and Thank You..

$id = Auth::user()->id;
$allprojects =   StartUp::where('user_id',$id)->orderBy('id','DESC')->Paginate(10);
$alldrafts    = StartUp::where('user_id',$id)->where('is_draft',1)->orderBy('id','DESC')->paginate(10);
$undereview    = StartUp::where('user_id',$id)->where('status','UnderReview')->where('isActive',true)->orderBy('id','DESC')->paginate(10);
$approved    = StartUp::where('user_id',$id)->where('status','approved')->where('isActive',true)->orderBy('id','DESC')->paginate(10);
$rejected   = StartUp::where('user_id',$id)->where('status','rejected')->where('isActive',true)->orderBy('id','DESC')->paginate(10);
$request  = StartUp::where('user_id',$id)->where('status','request')->where('isActive',true)->orderBy('id','DESC')->paginate(10);
$selled  = StartUp::where('user_id',$id)->where('status','solde')->where('isActive',true)->orderBy('id','DESC')->paginate(10);


return view('istihuath.seller.myprojectsmenu',compact('allprojects','alldrafts','undereview','approved','rejected','request'));

}

@salahaldain-abduljalil You can keep track of the offset and simply pass it to the back end and retrieve the next page of data.

see https://laracasts.com/discuss/channels/vue/paginating-from-my-response Note I have fetch js as example, just convert to your jquery code. And Tykus had some ways also.

You may want to use the skip and take Methods, see:

https://laravel.com/docs/12.x/queries#limit-and-offset

But a small custom paginator is fairly easy, I use hidden fields to keep track of these things.

Edit:

It's extremely hard showing the how to in a post, when many here spent months learning things like customizing pagination with ajax. There is a learning curve involved.

I use this if in javascript:

https://laracasts.com/discuss/channels/vue/paginating-from-my-response?page=1&replyId=731695

Where I have:

fload(url, element);

I am loading the next page.

@Jonjie https://laracasts.com/discuss/channels/laravel/can-i-redirect-a-get-request-to-a-post-request-for-inertia-partial-reloads?page=1&replyId=905441

https://laracasts.com/discuss/channels/laravel/can-i-redirect-a-get-request-to-a-post-request-for-inertia-partial-reloads?page=1&replyId=905775

I used server fetched partials.

https://laracasts.com/series/javascript-techniques-for-server-side-developers

But I put the partial in an object. You can have multiple objects with their own pagination.

For an object you use data, not src:

            function showTbl()
            {
                var url = '<?php echo DIR . "dog/indexi"; ?>';
                var modal = document.getElementById("myModal");
                var span = document.getElementsByClassName("close")[0];
                document.getElementById("myModal").style.display = "block";
                document.getElementById("thedialog").data = url;
            }

But this was only done for an answer here a while back as a quick example.