如何使用 Bootstrap 通过 jQuery 和 Ajax 使 dataTable 可点击

我已经将我的程序更改为现在使用Bootstrap，但是因此，我不再使用MVCContrib了。这给我带来了一些问题，因为我的行在我的数据表上是可点击的。请您告诉我我需要做什么才能使每一行可点击。当用户单击一行时，需要通过 ajax 将 2 列、即 tID 和 bcDate 发送到服务器，它将是一个类型 = 'POST'。我使用的是MVC4和剃须刀。

我的代码在下面，只需在jquery中调用DataTable。请有人帮助我。

<!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>

首先，来自 jquery.dataTables 行选择的文档然后从jquery的发布文档;

此示例代码可能有助于您：

jsfiddle 在这里

$(document).ready(function() {
  var selected = [];
  var table = $('#example').DataTable();
  $('#example tbody').on('click', 'tr', function() {
    //data you need to send to server
    var fname = $(this).find("td").eq(0).html();
    var lname = $(this).find("td").eq(1).html();
    alert(fname + " " + lname);
    //var id = this.id;
    var index = $.inArray(fname, selected);
    if (index === -1) {
      selected.push(fname);
      //Send to server-side
      // more at: http://api.jquery.com/jquery.post/
      $.post("test.php", { fname: fname, lname: lname })
        .done(function() {
          alert("second success");
        })
        .fail(function() {
          alert("error");
        })
        .always(function() {
          alert("finished");
        });;

    } else {
      selected.splice(index, 1);
    }
    $(this).toggleClass('selected');
  });
});

感谢伊尔凡的帮助。我只是设法使用 Ajax 让它工作，它工作得很好......这是我所做的..再次感谢！！

<script type="text/javascript">
    $(document).ready(function () {
        var table = $('#example').DataTable();
        $('#example tbody').on('click', 'tr', function () {
            var data = table.row(this).data();
            $.ajax(
            {
                type: "POST",
                url: "/Travel/AllTrHeaderTR",
                data: { tID: $.trim($(this).find('td:eq(0)').text()), dDate: $.trim($(this).find('td:eq(3)').text()) }
            });
        });
    });
</script>

谢谢纳伦

相关内容

最新更新

热门标签：