加载过滤后的数据,而无需在Laravel中重新加载整个页面

时间:2018-03-01 13:08:30

标签: javascript jquery html ajax laravel

我想从数据库加载数据而不用jquery重新加载整个页面。

就像在这支笔中:https://codepen.io/gabrieleromanato/pen/kheox?q=jQuery%3A%20filterable%20portfolio%20%20&order=popularity&depth=everything&show_forks=false

我的Index.blade php:

<div class="row">
                    <ul class="categories">
                            @foreach ($category as $category)
                      <li>
                        <a href="{{ route('category', $category->id) }}">  <class = "se ni dolocen"> {{ $category->title }} ({{ $category->companies->count() }}) </a>
                      </li>
                            @endforeach
                    </ul>                
                    
                    <div class="companies_list">                  
                    @foreach($categories as $companies)                
                      <div class="col_3">

                        @if ($companies->image_url)
                          <img src="{{ $companies->image_url }}" class="podjetjaslike" alt="" href="{{ route('companies.showp2ps', $companies->id) }}">  
                        @endif
                            <div class="tags">  <object>
                              <a href="/premium" title="Premium" class="premium">Premium</a>
                            </object><div class="rate color4">{{ $companies->rating }}</div>
                          </div></a>
    											<div class="content">
                            <a onclick="" href="{{ route('companies.showp2ps', $companies->id) }}">
                              <h3>{{ $companies->title }}</h3></a>
                              
    												<p>{{ $companies->categorie_id }}.</p>
    												<div class="bottom">
    													<div class="time">{{ $companies->date }}</div>
</div>
	</div>
</div>

                    @endforeach

这是我的page.controller:

public function category($id) {

            $category = Category::with('companies')->orderBy('title', 'asc')->get();
      
            //\DB::enableQueryLog();
            $categories = Companies::Paginate()
            
            ->where('category_id', $id);

            return view("pages.index", compact ('categories', 'category'));    //->render();

            //dd(\DB::getQueryLog());
        }

在index.php的最后。我有jquery脚本:

<script type="text/javascript">

    var Browse = {
        sort: function(items) {
            items.show();
            $('ico_list').find('col_3').not(items).fadeOut(500);
        },
        showAll: function(items) {
            items.fadeIn(500);
        },
        doSort: function() {
            $('li', 'categories').on('click', function() {

                var $li = $(this);
                if (!$li.is('#all')) {

                    var items = $({{ $companies->id }});

                    Browse.sort(items);

                } else {
                    Browse.showAll($('col_3', 'companies_list'));
                }

            });
        }
    };

    Browse.doSort();

    </script>

如何使用jquery重新加载动态数据以不重新加载页面?

0 个答案:

没有答案