我正在使用ASP.NET MVC 4上的Web应用程序设计。我使用DataTable进行表格设计，并成功创建了它的按钮（与它一致）＆＃39;搜索框）
我的问题是，我没有任何关于如何通过点击这些按钮来显示自定义html模式的线索。
任何想法都将受到赞赏。
这是我的表格的html代码：
<table id="exampledatatable" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" >
<thead>
<tr>
<th>Customer Code</th>
<th>Customer Name</th>
<th>Customer Type</th>
<th>Industry Type</th>
<th>Website</th>
<th>Email</th>
<th>Off Day 1</th>
<th>Off Day 2</th>
<th>E-mail</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger</td>
<td>Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>5421</td>
<td>t.nixon@datatables.net</td>
</tr>
</tbody>
</table>
这是表格按钮的脚本：
<script>
$(document).ready(function () {
$('#exampledatatable').DataTable({
dom: 'Bfrtip',
buttons: [
{
extend: 'copyHtml5',
text: '<h4 style="font-size: 13px;"><i class="fa fa- plus-circle fa-x5"></i> New</h4>',
titleAttr: 'Create New Record'
},
{
extend: 'csvHtml5',
text: '<h4 style="font-size: 13px;"><i class="fa fa-pencil fa-x5"></i> Edit</h4>',
titleAttr: 'Edit Existing Record'
},
{
extend: 'csvHtml5',
text: '<h4 style="font-size: 13px;"><i class="fa fa-trash fa-x5"></i> Delete</h4>',
titleAttr: 'Delete Existing Record'
},
{
extend: 'pdfHtml5',
text: '<h4 style="font-size: 13px;"><i class="fa fa-reply-all fa-x5"></i> Restore</h4>',
titleAttr: 'Restore Deleted Record'
},
{
extend: 'pdfHtml5',
text: '<h4 style="font-size: 13px;"><i class="fa fa-refresh fa-x5"></i> Refresh</h4>',
titleAttr: 'Restore Deleted Record'
},
{
extend: 'pdfHtml5',
text: '<h4 style="font-size: 13px;"><i class="fa fa-print fa-x5"></i> Print</h4>',
titleAttr: 'Restore Deleted Record'
},
{
extend: 'pdfHtml5',
text: '<h4 style="font-size: 13px;"><i class="fa fa-times-circle fa-x5"></i> Close</h4>',
titleAttr: 'Restore Deleted Record'
}
]
});
});
</script>
这是我的模态
的代码<div id="generalCusModal" class="modal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header modal-header-employee">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title"><img class="crud" src="~/Images/profile.png" />Customer Records Management</h3>
</div>
<div class="modal-body">
<h4 class="lbl_custinfo">General</h4>
<div class="form-group row">
<label class="col-xs-4 col-sm-offset-1 col-sm-4 control-label">Customer Code</label>
<div class="col-xs-8 col-sm-6">
<input class="form-control" type="text" placeholder="<Auto>" disabled>
</div>
</div>
<div class="form-group row">
<label class="col-xs-4 col-sm-offset-1 col-sm-4 control-label">Customer Name</label>
<div class="col-xs-8 col-sm-6">
<input class="form-control" type="text">
</div>
</div>
<div class="form-group row">
<label class="col-xs-4 col-sm-offset-1 col-sm-4 control-label">Company Type</label>
<div class="col-xs-8 col-sm-6">
<select class="form-control" id="sel1" disabled>
<option value="">CUSTOMER</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-xs-4 col-sm-offset-1 col-sm-4 control-label">Customer Type</label>
<div class="col-xs-8 col-sm-6">
<select class="form-control" id="sel1">
<option value="" selected></option>
<option>WALK-IN</option>
<option>RESIDENTIAL</option>
<option>COMPANY</option>
<option>SCHOOL</option>
<option>BANK</option>
<option>CLINIC</option>
<option>RESTAURANT</option>
<option>HOSPITAL</option>
<option>HOTEL</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-xs-4 col-sm-offset-1 col-sm-4 control-label">Industry Type</label>
<div class="col-xs-8 col-sm-6">
<select class="form-control" id="sel1">
<option value="" selected disabled></option>
<option>ADVERTISING AGENCIES</option>
<option>BUSINESS PROCESS OUTSOURCING</option>
<option>ENTERTAINMENT COMPANY</option>
<option>FOOD COMPANY</option>
<option>TECHNOLOGY</option>
<option>TELECOMMUNICATION</option>
<option>PHARMACEUTICAL</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-xs-4 col-sm-offset-1 col-sm-4 control-label">Day Off 1</label>
<div class="col-xs-8 col-sm-6">
<select class="form-control" id="sel1">
<option value="" selected disabled></option>
<option>MONDAY</option>
<option>TUESDAY</option>
<option>WEDNESDAY</option>
<option>THURSDAY</option>
<option>FRIDAY</option>
<option>SATURDAY</option>
<option>SUNDAY</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-xs-4 col-sm-offset-1 col-sm-4 control-label">Day Off 2</label>
<div class="col-xs-8 col-sm-6">
<select class="form-control" id="sel1">
<option value="" selected disabled></option>
<option>MONDAY</option>
<option>TUESDAY</option>
<option>WEDNESDAY</option>
<option>THURSDAY</option>
<option>FRIDAY</option>
<option>SATURDAY</option>
<option>SUNDAY</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-xs-4 col-sm-offset-1 col-sm-4 control-label">Email</label>
<div class="col-xs-8 col-sm-6">
<input class="form-control" type="text">
</div>
</div>
<div class="form-group row">
<label class="col-xs-4 col-sm-offset-1 col-sm-4 control-label">Website</label>
<div class="col-xs-8 col-sm-6">
<input class="form-control" type="text">
</div>
</div>
<div class="form-group row">
<label class="col-xs-4 col-sm-offset-1 col-sm-4 control-label"></label>
<div class="col-xs-8 col-sm-6">
<textarea class="form-control" rows="4" style="min-width: 100%"></textarea>
</div>
</div>
</div><!--MODAL BODY-->
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-target="#custLocationModal" data-toggle="modal" data-dismiss="modal">Next</button>
<button type="button" class="btn btn-default">Clear</button>
</div>
</div>
</div>
</div>
提前谢谢
答案 0 :(得分：0)
我认为你可能会在那里与buttons人混淆。我猜你在最后一栏点击链接时想要访问该行吗？最有可能填充模态？
This应该做你需要的事情：
var table = $('#exampledatatable').DataTable({
columns:[
null,
null,
null,
null,
{
visible: false
},
{
visible: false
},
{
visible: false
},
{
visible: false
},
null,
null
]
});
$('#exampledatatable').on("click", ".customAction", function(){
var d = table.row($(this).parents("tr")).data();
console.log(d);
// Populate your modal or do whatever you need to do here...
});
链接的JSFiddle应该给你一个开始，我不知道如何处理块：
@Html.ActionLink("Edit", "UpdateCompany") |
@Html.ActionLink("Delete", "DeleteCompany") |
@Html.ActionLink("Restore", "RestoreCompany")
因为我对ASP.NET MVC 4不太满意，但是我猜你是这样的，我会把它留给你来训练如何创建按钮。我猜你可以在DataTable初始化中使用render函数，但是...
希望有所帮助。
P.S。记下click事件：将它附加到表本身而不是按钮类，或者它不会被附加到后续页面上的按钮！