How to make a row clickable using DataTables and Bootstrap via Jquery and MVC4
How to make a row clickable using DataTables and Bootstrap via Jquery and MVC4
narengokal@gmail.com
Posts: 3Questions: 2Answers: 0
Hi,
I have changed my programs to now use Bootstrap, however because of this, I do not use MVCContrib anymore. This has caused me some issues wrt my rows beign clickable on my dataTable. Please can you show me what I need to do to make each row clickable When the user clicks on a row, 2 columns need to be sent to the server via ajax and it would be a type = 'POST'. Im using MVC4 and razor. The 2 columns represent a primary key for another table. The POST using Ajax will be called and the detail, using the 2 columns needs to be shown.
My code is below with just a call to DataTable in the jquery. Please can someone assist me...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
@model gT.Models.THeaderModelList
@{
ViewBag.Title = "TR";
}
<head>
<meta content="IE=11.0000" http-equiv="X-UA-Compatible" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BT</title>
<link href="@Url.Content("~/Content/style.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/dataTables.bootstrap.min.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/bootstrap.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.core.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.widget.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/media/js/jquery.dataTables.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/dataTables.bootstrap.min.js")" type="text/javascript"></script>
<meta name="GENERATOR" content="MSHTML 11.00.9600.17037" />
<script type="text/javascript">
$(document).ready(function () {
var table = $('#example').DataTable();
});
});
</script>
</head>
@using (Html.BeginForm())
{
<body>
<table id="example" class="table table-responsive">
<thead>
<tr>
<th>T ID</th>
<th>D/s</th>
<th>CDATE</th>
<th>BCDATE</th>
<th>TSTATUS</th>
<th>DT</th>
<th>NB</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr">
<td>
@Html.DisplayFor(modelItem => item.tID)
</td>
<td>
@Html.DisplayFor(modelItem => item.DT)
</td>
<td>
@Html.DisplayFor(modelItem => item.creationDate)
</td>
<td>
@Html.DisplayFor(modelItem => item.bcDate)
</td>
<td>
@Html.DisplayFor(modelItem => item.tStatus)
</td>
<td>
@Html.DisplayFor(modelItem => item.dT)
</td>
<td>
@Html.DisplayFor(modelItem => item.nB)
</td>
</tr>
}
</tbody>
</table>
</body>
}
</html>
Thanks Kindly
Naren
This discussion has been closed.