ASP .NET中jquery数据表中的按钮 [英] Buttons in jquery datatable in ASP .NET

问题描述

亲爱的朋友们，



我在jquery数据表中绑定了值。没有datatable中的任何按钮执行良好。当我在datatable中添加按钮时没有在页面加载时显示值。



我尝试了什么：

 function BindGridview（）{
 $ .ajax（{
 type：POST，
 contentType：application / json; charset = utf-8，
 url：Employee.aspx / BindGridview，
 data：{}，
 dataType：json，
 success：function（data ）{
 $（'＃MyTable'）。DataTable（{
aaData：JSON.parse（data.d），
columns：[{data：SNo ，sortable：false}，
 {data：Id，visible：false，sortable：false}，
 {data：EmployeeId，sortable：false}，
 {data：EmployeeName}，{data：DOJ}，
 {data：Contact，sortable：false}，
 {data： AltContact，排序able：false}，
 {
 mRender：function（data，type，row）{
 return'< a href =class =table-editdata-id = Idonclick =编辑（'+ row.Id +'）>编辑< / a> /< a href =class =editor_removeonclick =删除（'+ row.Id +'）>删除< / a>'
} 
} 
] 
}）; 
}，
错误：函数（数据）{
 var r = data.responseText; 
 var errorMessage = r.Message; 
 alert（errorMessage）; 
} 
}）; 
} 
 

解决方案

.ajax（{
type：POST，
contentType：application / json; charset = utf-8，
url：Employee.aspx / BindGridview，
data：{}，
dataType：json，
success：function（data）{

（'＃MyTable'）。DataTable（{
aaData：JSON.parse（data.d），
columns：[{data：SNo，sortable：false}，
{data：Id，visible：false，sortable：false}，
{data：EmployeeId，sortable：false}，
{data：EmployeeName}，{data：DOJ}，
{data：Contact ，sortable：false}，
{data：AltContact，sortable：false}，
{
mR ender：function（data，type，row）{
return'< a href =class =table-editdata-id =Idonclick =Edit（'+ row.Id +' ）>编辑< / A> /< a href =class =editor_removeonclick =删除（'+ row.Id +'）>删除< / a>'
}
}
]
}）;
}，
错误：函数（数据）{
var r = data.responseText;
var errorMessage = r.Message;
alert（errorMessage）;
}
}）;
}

参考这个例子并更正错误，确保你在表格的标题中定义了额外的两个。

<！DOCTYPE html> 
< html> 
< head> 
< meta name =viewportcontent =width = device-width，initial-scale = 1> 
< link href =http：// localhost：45673 / dt / buttons.dataTables.min.css =stylesheet/> 
< link href =http：// localhost：45673 / dt / jquery.dataTables.min.css =stylesheet/> 
< script src =http：// localhost：45673 / dt / jquery-1.12.4.js>< / script> 
< script src =http：// localhost：45673 / dt / jquery.dataTables.min.js>< / script> 
< script src =http：// localhost：45673 / dt / dataTables.buttons.min.js>< / script> 
< / head> 
< body> 
< table id =MyTablestyle =width：400px> 
< thead> 
< tr> 
< th> Slno< / th> 
< th>联系< / th> 
< th> < /第> 
< th> < /第> 
< / tr> 
< / thead> 
< tbody>< / tbody> 
< / table> 
< script> 
 var输入= [{Id：1，联系人：'aa'}，
 {Id：2，联系人：'bb'}，
 {Id：3，联系人：'cc' }] 

Dear Friends,

I have bind values in jquery datatable. without any button in datatable executes well. when i add button in datatable didn't show values at pageload.

What I have tried:

function BindGridview() {
       $.ajax({
           type: "POST",
           contentType: "application/json; charset=utf-8",
           url: "Employee.aspx/BindGridview",
           data: "{}",
           dataType: "json",
           success: function (data) {
        $('#MyTable').DataTable({
                   "aaData": JSON.parse(data.d),
                   "columns": [{ "data": "SNo", sortable: false },
                               { "data": "Id", "visible": false, sortable: false },
                               { "data": "EmployeeId", sortable: false },
                               { "data": "EmployeeName" }, { "data": "DOJ" },
                               { "data": "Contact", sortable: false },
                               { "data": "AltContact", sortable: false },
                               {
                                 mRender: function (data, type, row) {
return '<a href="" class="table-edit" data-id="Id" onclick="Edit(' + row.Id + ')">EDIT</a> / <a href="" class="editor_remove" onclick="Delete(' + row.Id + ')">Delete</a>'
                       }
                   }
                   ]
               });
           },
           error: function (data) {
               var r = data.responseText;
               var errorMessage = r.Message;
               alert(errorMessage);
           }
       });
   }

解决方案

.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "Employee.aspx/BindGridview", data: "{}", dataType: "json", success: function (data) {

('#MyTable').DataTable({ "aaData": JSON.parse(data.d), "columns": [{ "data": "SNo", sortable: false }, { "data": "Id", "visible": false, sortable: false }, { "data": "EmployeeId", sortable: false }, { "data": "EmployeeName" }, { "data": "DOJ" }, { "data": "Contact", sortable: false }, { "data": "AltContact", sortable: false }, { mRender: function (data, type, row) { return '<a href="" class="table-edit" data-id="Id" onclick="Edit(' + row.Id + ')">EDIT</a> / <a href="" class="editor_remove" onclick="Delete(' + row.Id + ')">Delete</a>' } } ] }); }, error: function (data) { var r = data.responseText; var errorMessage = r.Message; alert(errorMessage); } }); }

refer this example and correct the errors, make sure you have defined extra two th in the header of the table.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="http://localhost:45673/dt/buttons.dataTables.min.css" rel="stylesheet" />
    <link href="http://localhost:45673/dt/jquery.dataTables.min.css" rel="stylesheet" />
    <script src="http://localhost:45673/dt/jquery-1.12.4.js"></script>
    <script src="http://localhost:45673/dt/jquery.dataTables.min.js"></script>
    <script src="http://localhost:45673/dt/dataTables.buttons.min.js"></script>
</head>
<body>
    <table id="MyTable" style="width:400px">
        <thead>
            <tr>
                <th>Slno</th>
                <th>Contact</th>
                <th> </th>
                <th> </th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <script>
        var input = [{ Id: 1, Contact: 'aa' },
        { Id: 2, Contact: 'bb' },
        { Id: 3, Contact: 'cc' }]

这篇关于ASP .NET中jquery数据表中的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！