Fatal编程技术网
  • asp.net/
  • Asp.net 如何在boostrap表中实现Datatable

Asp.net 如何在boostrap表中实现Datatable

asp.net asp.net-web-api

Asp.net 如何在boostrap表中实现Datatable,asp.net,asp.net-web-api,datatable,Asp.net,Asp.net Web Api,Datatable,我想在我的ASP.NET web Api项目中创建带有分页、排序和搜索的Jquery Datatable 在我的引导表中，如下所示。我没有收到任何错误，但没有向我显示pagin field，serach field。。没什么，只是我的桌子。我知道这和youtube视频的表格形式不一样，但我怎么能拥有和他一样的功能呢 <!DOCTYPE html> <html> <head> <title>Countries</titl

我想在我的ASP.NET web Api项目中创建带有分页、排序和搜索的Jquery Datatable

在我的引导表中，如下所示。我没有收到任何错误，但没有向我显示pagin field，serach field。。没什么，只是我的桌子。我知道这和youtube视频的表格形式不一样，但我怎么能拥有和他一样的功能呢

        <!DOCTYPE html>
<html>
<head>
    <title>Countries</title>
    <meta charset="utf-8" />
    <script src="Scripts/jquery-3.1.1.js"></script> // Tried even with jquery-1.12.4.js
    <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
    <link href="Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />


</head>
<body>

    <div class="container">

        <table class="table table-bordered table-hover table table-responsive success" id="countriesTable">
            <thead>
                <tr>
                    <th>
                       Country Id
                    </th>
                    <th>
                        Country name
                    </th>

                    <th class="col-md-2">
                       Action
                    </th>
                </tr>
            </thead>
            <tbody class="tbody"></tbody>
        </table>
    </div>
</body>
</html>

 <script type="text/javascript">
        $(document).ready(function () {

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

function loadCountries() {

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

            $.ajax({
                url: "/Api/Countries",
                type: "GET",

                headers: {

                    'Authorization': 'Bearer ' + sessionStorage.getItem('accessToken')

                },

                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var html = '';
                    $.each(result, function (key, item) {


                        html += '<tr>';
                        html += '<td>' + item.CountryId + '</td>';
                        html += '<td>' + item.CountryName + '</td>';


                        html += '<td><Button class="btn btn-primary" onclick="return getByID(' + item.CountryId + ')">Edit</button>  <Button                         class="btn btn-danger btn-md" onclick="return Delete(' + item.CountryId + ')">Delete</Button></td>';
                        html += '</tr>';
                    });
                    $('.tbody').html(html);
                },
                error: function (jqXHR) {

                    if (jqXHR.status == "401") {
                        $('#errorModal').modal('show');
                    }
                    else {
                        $('#divErrorText').text(jqXHR.responseText);
                        $('#divError').show('fade');
                    }



                }
            });
        }


  </script>


国家
//与jquery-1.12.4.js并驾齐驱
国家Id
国名
行动
$（文档）.ready（函数（）{
$（'#countriesTable'）。数据表({
“bSort”：正确，
“bFilter”：没错，
“bPaginate”：对，
“bProcessing”：true
});
装载国（）；
}
功能加载国家（）{
$（'#compTable'）。数据表({
“bSort”：正确，
“bFilter”：没错，
“bPaginate”：对，
“bProcessing”：true
});
$.ajax({
url:“/Api/Countries”，
键入：“获取”，
标题：{
“授权”：“持有者”+会话存储.getItem（'accessToken'）
},
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
成功：功能（结果）{
var html=''；
$。每个（结果、功能（键、项）{
html+=''；
html+=''+item.CountryId+''；
html+=''+item.CountryName+''；
html+=‘编辑删除’；
html+=''；
});
$（'.tbody'）.html（html）；
},
错误：函数（jqXHR）{
如果（jqXHR.status==“401”）{
$（'errorModal'）.modal（'show'）；
}
否则{
$（'#diversorText'）.text（jqXHR.responseText）；
$（'diveror'）。显示（'fade'）；
}
}
});
}
您必须正确初始化表，并从文档页面添加适当的依赖库。要开始

$('#countriesTable').DataTable({
            "bSort": true,
            "bFilter": true,
            "bPaginate": true,
            "bProcessing": true
        })
对于列标题中的小箭头按钮（指示排序方向等），需要添加适当的glyphicon库

您可以了解更多选项

如何找到合适的依赖库

检查这一点。在示例部分中有3部分HTML、CSS和javascript。他们提到了这些库。您需要按照提到的正确顺序添加它们

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

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

你可能会想 我可以把一个html按钮代码放在一个json字符串中吗？是的，你可以。试试看

参考资料：

Wilander:检查我的答案……希望有帮助。谢谢你的回答。我不知道如何添加glyphicon图标，但我会在youtue上搜索，但我不明白你说的“添加正确的依赖库”。我该如何知道或如何添加依赖库？我尝试了你的代码，但没有“添加正确的依赖库”当然不行了，谢谢again@JonasWillander.：检查答案..如果它有助于选择我的答案。它有助于未来用户。现在我编辑了我的代码，请检查。我按照您所写的理解做了，但现在发生的是，当我第一次重新加载页面时，它会显示所有内容，但当我单击serach上的任意位置或更改“显示整个”时或者单击小按钮，然后取消显示我的所有数据。我的表将变为空，如果我刷新我的页面，所有国家/地区的名称都将加载（几乎40个国家/地区），这是Asp.Net web api，它与我的“普通表”配合良好，但我希望将DataTable应用到我的表中。也许你知道我的代码有什么问题。。请帮助……）@乔纳斯·威兰德：你是如何填写表格的？我不知道该如何感谢你，现在我已经用孔代码编辑了。。。我的意思是HTMl和jquery..从我的Api加载国家的页面。。。请再次检查我编辑的代码。 
        <table id ="my-table" class="table table-striped table-responsive sorting "  >
            <thead>
                <tr>
                <td>col1</td>
                <td>col2</td> 


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

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

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