Question

我已将程序更改为现在使用Bootstrap，但正因为如此，我不再使用MVCContrib了。这导致我的一些问题，我的行可以在我的dataTable上点击。请告诉我我需要做什么才能使每一行都可以点击。当用户点击一行时，需要通过ajax将2列，即tiz和bcDate发送到服务器，它将是一个类型=＆＃39; POST＆＃39;。我正在使用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>

Answer 1

首先，来自jquery.dataTables row selection的文档然后从jquery的post文档中获取;

此示例代码可能对您有所帮助：

jsfiddle here

$(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');
  });
});

Answer 2

感谢Irfan的帮助。我只是设法使用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>

谢天谢地那仁

如何使用可通过jQuery和Ajax单击的Bootstrap创建dataTable

2 个答案: