Modal form with ajax table pagination problem

Basically I wanted to create a modal form with table list of campaign that is ajax paginated, my problem is every I change the pages inside modal it loads the whole page of accounts create.blade.php

My sample code hereunder:

in AccountController.php

        public function create()
        {
        ...
        $campaigns = Campaign::paginate(10);
            return view('accounts.create', compact(
                'industry_type',
                'account_type',
                'users_options',
                'campaigns',
                'i'
            ));
        }

fields.blade.php that are included in create.blade.php:

        <!-- Campaign Name Field -->
        <div class="form-group col-sm-5">
            {!! Form::label('campaign_name', 'Campaign Name:') !!}
            {!! Form::text('campaign_name', null, ['class' => 'form-control']) !!}
        </div>
        <!-- Find Campaign ( Modal Form) -->
        <div class="form-group col-sm-1">
            {!! Form::label('search_campaign', 'Find:') !!}
            {!! Form::button('F', ['class' => 'btn btn-primary', 'data-toggle'=>'modal', 'data-target'=>'#findCampaign', 'id'=>'find']) !!}
        </div>

in my modal

<div class="modal fade" id="findCampaign" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="myModalLabel">Find Campaign</h4>
            </div>
            <div class="modal-body">

                <table class="table table-striped" id="test">
                    <thead>
                        <th>#</th>
                        <th>Campaign Name</th>
                    </thead>
                    <tbody>
                    <section class="campaign">
                    @foreach($campaigns as $key => $campaign)
                            <tr>
                                <td>{{ $i++ }}</td>
                                <td>{{ $campaign->name }}</td>
                            </tr>
                    @endforeach
                        <tr><td>{!! $campaigns->render() !!}</td></tr>
                    </section>
                    </tbody>
                </table>
            <!-- End of modal-body -->
            </div>
            <div class="modal-footer">
                {!! Form::button('Close', ['class' => 'btn btn-default', 'data-dismiss'=>'modal']) !!}
            </div>
        </div>
    </div>
</div>

in my scripts.blade.php

<!-- jQuery 2.1.4 -->
<script src="{{ asset('/plugins/jQuery/jQuery-2.1.4.min.js') }}"></script>
<!-- Bootstrap 3.3.2 JS -->
<script src="{{ asset('/js/bootstrap.min.js') }}" type="text/javascript"></script>
<!-- AdminLTE App -->
<script src="{{ asset('/js/app.min.js') }}" type="text/javascript"></script>
<script>
    $(function ()
     {
            $('body').on('click', '.pagination a', function(e)
        {
            e.preventDefault();            
            var url = $(this).attr('href');
            var outer_html = $('.campaign')[0].outerHTML ;
            $.get(url, function(outer_html)
            {
                $('#test').replaceWith(outer_html);
            });
        });
        });
</script>

My question is how can I change pages to another pages in paginated table inside the modal form using ajax.