如何使用Bootstrap通过jQuery和Ajax点击数据表

我已经改变了我的程序到现在使用Bootstrap，但是因为这个原因，我不再使用MVCContrib。这导致了我的行在我的dataTable上可点击的一些问题。请你可以告诉我我需要做些什么来使每行可点击。当用户点击一行，2列时，需要通过ajax将viz tID和bcDate发送到服务器，它将是一个type ='POST'。我使用MVC4和剃须刀。如何使用Bootstrap通过jQuery和Ajax点击数据表

我的代码如下，只需要调用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>

来源

2016-03-07 Naren Gokal

首先，从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'); 
    }); 
});

来源

2016-03-07 22:32:25 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>

谢谢请那仁

来源

2016-03-08 20:51:06

如何使用Bootstrap通过jQuery和Ajax点击数据表

回答

相关问题