用ajax填充Laravel中的表格?

时间:2014-02-07 00:48:42

标签: php jquery ajax laravel-4

我有一个Laravel应用程序,我在其中创建页面布局,将其作为“内容”变量添加到表中(几乎所有来自我发现的教程)。这是控制器动作:

public function getMain() {
    $js_config = Category::all();
    $resources = Resource::all()->take(100);
   $this->layout->content = View::make('categories.show')->with('js_config', $js_config)->with('resources', $resources);
}

这使用主布局模板并使用内容变量插入此表:

<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <td>ID</td>
            <td>Name</td>
        </tr>
    </thead>
    <tbody>
    @foreach($resources as $key => $value)
        <tr>
            <td>{{ $value->id }}</td>
            <td>{{ $value->title }}</td>

        </tr>
    @endforeach
    </tbody>
</table>

但后来问题出现了:我有一个jstree用户可以选择节点,触发jQuery方法:

$('#jstree2').on("changed.jstree", function (e, data) {
    console.log(data.selected);
    $.get("filter", { category: data.selected })
        .done(function (resultdata) {
            //Test only, this returns the data wanted in json, which I stringify just to display in test
            alert("Data Loaded: " + JSON.stringify(resultdata));
        });
});

jQuery在控制器中调用此操作方法:

public function getFilter()
  {
      $input = Input::get('category.0');

      $categories = Category::find($input);


      //category is the name from the model below
      return Response::json(array(
          'error' => false,
          'category' => $categories->toArray()),
          200
      );
  }

(有一个数组作为输入的原因是我最终希望能够允许在树中选择多个节点)

此操作正确地从DB获取数据并将其作为json返回。然后,上面jQuery中的回调会在此时发出警报,就像测试一样。

但我真正想做的当然是重新填充表格。现在,正如您所看到的,我已经使用Bootstrap创建了一个漂亮的表,而且我只是希望能够让用户随意重新填充它,而无需刷新页面。

但是我不知道怎么做,除非通过某种字符串返回值精心重新创建这个表,但这似乎不是一个好主意。

我希望有一些方法可以将返回值传递回视图并让它重新加载表中的值,利用我在php变量“content”中加载的相同“子视图”,如上所述?

任何帮助都非常感谢!

编辑:

根据要求,这里是json的一个示例(取自浏览器控制台输出,它实际上不是类别表,但格式相同):

[{“id”:“1”,“title”:“Transportation AC 4494”,“created_by”:“4”,“modified_by”:null},{“id”:“2”,“title” :“Safety First AC 4294”,“created_by”:“3”,“modified_by”:null},{“id”:“3”,“title”:“Warranty AC 34066”,“created_by”:“4”, “modified_by”:空}]

编辑2(刚刚意识到在json的上一次编辑中控制器中有一些废话,所以我现在把它改成了一个更干净的样本)

编辑3:

我通过在jQuery中创建表行来完成这项工作:

var trHTML = '';
                $.each(resultdata, function (i, item) {
                    trHTML += '<tr><td>' + item.id + '</td><td>' + item.title + '</tr>';
                });
                $('#ajaxtable').html(trHTML);

但主要是我希望这可以更好地解释我的问题:这不是我想要做的。我想要的只是创建一个局部视图,然后用jquery加载那个现成的视图:

这样的局部视图:

<table class="table table-striped table-bordered" id="resultstable">
    <thead>
        <tr>
            <td>ID</td>
            <td>Name</td>
        </tr>
    </thead>
    <tbody id="ajaxtable">
    @foreach($resources as $key => $value)
        <tr>
            <td>{{ $value->id }}</td>
            <td>{{ $value->title }}</td>
        </tr>
    @endforeach
    </tbody>
</table>

我通过从jquery代码创建和调用控制器中的新函数来测试它:

   public function getTable()
    {
        $resources = Resource::all()->take(5);
        return View::make('categories.results')->with('resources', $resources);
    }

但它不起作用。虽然它确实给了我该视图的html,但它是未经处理的。即,foreach循环未解析,但仍然存在于表中的代码中。见图:

enter image description here

那么如何使用jquery代码加载此视图?我觉得即使表行的jquery创建工作,在php中进行视图然后只是用jquery加载它应该是更正确的方法...?

2 个答案:

答案 0 :(得分:2)

您是否查看过Datatables jQuery插件? Laravel实际上有一个很好的包,可以帮助整合Laravel和Datatables。 Laravel包生成json,您可以使用Datables + AJAX重新填充数据。可能正在检查......

https://github.com/Chumper/datatable http://datatables.net/

否则,您只需要使用AJAX重新填充表格。

答案 1 :(得分:0)

正如Sirago回答的那样,使用jQuery Datatables是以ajax方式将数据加载到表中的一个很好的选择。

除了Sirago建议的内容之外,还有另一个很棒的Laravel 4软件包,专门用于从服务器端生成JSON数据。

https://github.com/bllim/laravel4-datatables-package

但是除了服务器端配置(修改诸如composer.json,config / app.php等文件)之外,您还需要使用数据表进行Javascript编码。