How can I get Laravel's LengthAwarePaginator to render in the current view?

The project I'm on is a Laravel (5.8) PHP project, and the paginator is kind of giving me fits. My problem is that when I use Laravel for pagination, if I try to actually use the paginator, when the new page is returned it's just a (correct) standalone html snippet. As far as I can tell the info is correct, but it's not being rendered 'in place'. It just comes out as minimally rendered html and overwrites everything else.

In the paginator in the category view I have:

	$categoryLevel->links()
	

I also tried adding a path to the index view, but this didn't work:

	$categoryLevel->links('/manager/reports/order-data/sections/category') <-- this one brings back the index view but doesn't have any of the info from the index method in the controller

I know there's a lot of junk below, but does anyone see right off where the issue is? I could really use the help!

My routes:

Route::get('manager/reports/order-data', 'Manager\Report\OrderDataController@index')->middleware('auth');
Route::get('manager/reports/order-data/category/ajax', 'Manager\Report\OrderDataController@categoryLevelAjax')->middleware('auth');
Route::post('manager/reports/order-data/category/ajax', 'Manager\Report\OrderDataController@categoryLevelAjax')->middleware('auth');

in the controller:

    /**
     * returns Orders report index view
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $start = (new Carbon('first day of January 2020'))->toDateTimeString();
        $end = Carbon::today()->toDateTimeString();
        $manufacturerLevel = Orders::getOrderDataReport($start, $end)->get();
        $categoryLevel = NULL;
       return view($this->view . '.order-data.test', compact('manufacturerLevel', 'categoryLevel'));
    }

    /**
     * Returns our order data table ajax response
     *
     * @return \Illuminate\Http\Response
     */
    public function categoryLevelAjax(Request $request, $offset = 10)
    {
        $dates = request('mbatable.daterange');
        $mfr_id = $request->manufacturer_id;
        $start = (new Carbon('first day of January 2020'))->toDateTimeString();
        $end = Carbon::today()->toDateTimeString();

        if ($dates && isset($dates['start']) && isset($dates['end'])) {
            $start = date('Y-m-d', intval($dates['start']));
            $end   = date('Y-m-d', intval($dates['end']));
        }
        $sizeLevel = NULL;
        $categoryLevel = Orders::getOrderDataByCategory($start, $end, $mfr_id);

        return view($this->view . '.order-data.sections.category', compact('categoryLevel', 'sizeLevel'));

    }
	

In my index view w/ javascript:

<div class="page-content-wrapper">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card m-b-20">
                    <div>
                        <div class="container-fluid">
                            <h4 class="mt-0 header-title padd-left-15">Order Data Report</h4>
                            <div class="form-group row">
                                <div class="col-sm-6">
                                    @include('includes/mbatable/daterange-picker')
                                </div>
                            </div>
                            <div id="accordion">
                                <div class="card">
                                    <div class="card-header row" id="headingOne" style="border-bottom: 2px solid black">
                                        <div class="col pt-3 ml-5">Expand/Collapse</div>
                                        <div class="col pt-3"><strong>Manufacturer</strong></div>
                                        <div class="col pt-3"><strong>Quantity Ordered</strong></div>
                                        <div class="col pt-3"><strong>Total Amount Ordered</strong></div>
                                    </div>
                                    @foreach($manufacturerLevel as $key => $mfr)
                                        <div id="collapseOne-{{$key}}-{{$mfr->manufacturer_id}}" class="collapse show"
                                             aria-labelledby="headingOne" data-parent="#accordion" aria-expanded="true">
                                            <div class="pl-2">
                                                <div class="row">
                                                    <div class="col">
                                                        <h5 class="mb-0">
                                                            <button onclick="updateManufacturer('mfr-{{$key}}-{{$mfr->manufacturer_id}}', {{$mfr->manufacturer_id}})"
                                                                    class="btn btn-link collapsed"
                                                                    data-toggle="collapse"
                                                                    data-target="#collapseTwo-{{$key}}-{{$mfr->manufacturer_id}}"
                                                                    aria-expanded="true"
                                                                    aria-controls="collapseTwo-{{$key}}-{{$mfr->manufacturer_id}}">
                                                                <span id="mfr-{{$key}}-{{$mfr->manufacturer_id}}" class="mdi mdi-plus"></span>
                                                            </button>
                                                        </h5>
                                                    </div>
                                                    <div class="col pt-3">{{$mfr->mfr_name}}</div>
                                                    <div class="col pt-3">{{$mfr->total_quantity}}</div>
                                                    <div class="col pt-3">
                                                        ${{ number_format($mfr->total, 2, ".", ",") }}</div>
                                                </div>
                                                <div id="collapseTwo-{{$key}}-{{$mfr->manufacturer_id}}"
                                                     class="collapse" aria-labelledby="headingTwo"
                                                     data-parent="#collapseOne-{{$key}}-{{$mfr->manufacturer_id}}" aria-expanded="false">
                                                    <div class="card-header row" id="headingTwo" style="border-bottom: 2px solid black">
                                                        <div class="col pt-3 ml-3">Expand/Collapse</div>
                                                        <div class="col pt-3"><strong>Category</strong></div>
                                                        <div class="col pt-3"><strong>Quantity Ordered</strong></div>
                                                        <div class="col pt-3"><strong>Total Amount Ordered</strong>
                                                        </div>
                                                    </div>
                                                    <div class="pl-2">
                                                        <div id='mfr-{{$key}}-{{$mfr->manufacturer_id}}-response'>
                                                            @include('manager/reports/order-data/sections/category')
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div> <!-- end col -->
            </div> <!-- end row -->
        </div><!-- container -->
    </div> <!-- Page content Wrapper -->
</div> 

function updateManufacturer(x, mfr_id) {
    var _token = $('input[name="_token"]').val();
    var _mfr_id = mfr_id;
    var spn = $('#' + x);
    var response_element = x + '-response';
    if(spn.hasClass('mdi-plus')){
        spn.toggleClass('mdi-plus');
        spn.toggleClass('mdi-minus');

        $.ajax({
            type:'POST',
            data: {_token: _token, manufacturer_id: _mfr_id},
            url: '/manager/reports/order-data/category/ajax',
            dataType: 'html',
            async: false,
            cache: false,
            success: function(response)
            {
                var element =  $('#' + response_element);
                element.append(response);
            }
        });
    } else {
        spn.toggleClass('mdi-plus');
        spn.toggleClass('mdi-minus');
    }

    return true;
};
						

In my category view (an include in the index):

@if($categoryLevel)
    @foreach($categoryLevel as $key => $cat)
        <div class="row">
            <div class="col ml-5">
                <h5 class="mb-0">
                    <button onclick="updateCategory('{{$key}}-{{$cat->manufacturer_id}}', {{$cat->manufacturer_id}}, {{$cat->category_id}})"
                            class="btn btn-link"
                            data-toggle="collapse"
                            data-target="#collapseThree-{{$key}}-{{$cat->category_id}}"
                            aria-expanded="true"
                            aria-controls="collapseThree-{{$key}}-{{$cat->category_id}}">
                        <span id="cat-{{$key}}-{{$cat->manufacturer_id}}" class="mdi mdi-plus"></span>
                    </button>
                </h5>
            </div>
            <div class="col pt-3">{{$cat->category_name}}</div>
            <div class="col pt-3">{{$cat->total_quantity}}</div>
            <div class="col pt-3">${{number_format($cat->total, 2, ".", ",")}}</div>
        </div>
        <div id="collapseThree-{{$key}}-{{$cat->category_id}}"
             class="collapse" aria-labelledby="headingThree"
             data-parent="#collapseTwo-{{$key}}-{{$cat->manufacturer_id}}" aria-expanded="false">
            <div class="card-header row" id="headingThree" style="border-bottom: 2px solid black">
                <div class="col pt-3 ml-3">Expand/Collapse</div>
                <div class="col pt-3"><strong>Size</strong></div>
                <div class="col pt-3"><strong>Quantity Ordered</strong></div>
                <div class="col pt-3"><strong>Total Amount Ordered</strong>
                </div>
            </div>
            <div class="pl-2">
                <div id='size-{{$key}}-{{$cat->manufacturer_id}}-response'>
                    @include('/manager/reports/order-data/sections/size')
                </div>
            </div>
        </div>
    @endforeach
    @if($categoryLevel->hasMorePages())
        {{ $categoryLevel->links() }}
    @endif
@endif

And the code that gets the actual LengthAwarePaginator:

public static function getOrderDataByCategory($start, $end, $mfr_id = NULL, $offset = 10){

	$currentPage = LengthAwarePaginator::resolveCurrentPage();

	if ($currentPage >= 1)
		$skip = ($currentPage - 1) * $offset;
	else
		$skip = 0;

	$select = 'count(*) as record_count, mfr.id as manufacturer_id, mfr.`name` AS mfr_name, pc.id AS category_id, 
	pc.name AS category_name, SUM(orders.qty) AS total_quantity, SUM((orders.qty * orders.retail)) AS total';

	$query = Orders::join('manufacturers as mfr', 'mfr.id', '=', 'orders.manufacturer_id')
		->join('transactions as t', 't.id', '=', 'orders.transaction_id')
		->join('products as p', 'p.id', '=', 'orders.product_id')
		->join('product_categories as pc', 'pc.id', '=', 'p.category_id')
		->whereBetween('t.transaction_date', [$start, $end])
		->selectRaw($select)
		->groupBy('mfr_name', 'pc.name')
		->orderBy('mfr_name', 'asc');

	if($mfr_id){
		$query = $query->where('orders.manufacturer_id', '=', $mfr_id);
	}

	$categoryLevel = $query
		->skip($skip)
		->take($offset)
		->get()
		->values();

	return new LengthAwarePaginator($categoryLevel, $categoryLevel->first()->record_count, $offset, $currentPage, [
		'path' => LengthAwarePaginator::resolveCurrentPath(),
		'offset' => $offset
	]);
}