Question

我想创建Jquery Datatable，在我的ASP.NET Web Api项目中进行分页，排序，搜索this youtube clip

在我的引导表中，如下所示。我没有收到任何错误，但没有显示我的pagin字段，serach字段..没有任何显示我只是我的表。我认为它与youtube剪辑的表格不同，但我应该如何拥有与他相同的功能。

enter code here
Service::Where('searchservice','like','%'.$searchKeyword.'%')->get();

Answer 1

您必须正确初始化表，并从文档页面添加适当的依赖库。为了帮助您入门

$('#countriesTable').DataTable({
            "bSort": true,
            "bFilter": true,
            "bPaginate": true,
            "bProcessing": true
        })

对于列标题中的小箭头按钮（表示排序方向等），您需要添加正确的glyphicon库。

您可以了解更多选项here。

如何找到合适的依赖库？

检查example。在示例部分中有3部分HTML，CSS和javascript。他们提到那里的图书馆。您需要按正确的顺序添加它们。

根据您的要求，您需要提供数据表提供的表格生成功能。在进行ajax调用后，会找到响应。现在您从中获取数据并将其映射到适当的列。

$('#my-table').DataTable({
    ajax: {
      url:websiteurl,
      data:function(dtl){
      }
    },
    columns: [
     { data: 'col1'},
     { data: 'col2'}, 
    ]
   });

HTML：

        <table id ="my-table" class="table table-striped table-responsive sorting "  >
            <thead>
                <tr>
                <td>col1</td>
                <td>col2</td> 


                </tr> 
            </thead>
            <tbody>
            </tbody>
        </table>

记住

为此你需要在对象数组的fom中构建json输出。

             JSONArray ja= new JSONArray();
             JSONObject jo = new JSONObject();
             jo.put("col1",col1val);
             jo.put("col2",col2val);

             ja.put(jo);
             return ja in the response.

你可能会认为

我可以将一个html按钮代码放在json字符串中吗？你可以。试试吧。

参考：Link

如何在boostrap表中实现Datatable

1 个答案:

记住

你可能会认为