在jquery DataTable初始化中动态设置行onclick事件

时间:2016-02-04 19:18:41

标签: datatables asp.net-ajax

我使用调用我的控制器功能的ajax将数据加载到表中。当选择新页面或对列进行排序时,我使用ajax将数据重新加载到同一个原始控制器函数。这样我就不会在需要时立即加载所有物品。我想让每一行都有一个onclick javascript函数,我可以从中获取该行所单击的列信息。有任何想法吗?控制器功能只根据用户想要查看的结果范围和排序顺序来获取数据。

我唯一的javascript代码如下:

<script>
    $(function() {
        var oTable;
        oTable = $('#tblItemModel').DataTable({
            "serverSide": true,
            "paginate": true,
            "ajaxSource": "/Finance/ItemListAjax",
            "processing": true,
            "serverMethod": "GET",
            "displayLength": 50
        });
    })
</script>

我的html如下:

<table class="table table-striped at-table" id="tblItemModel">
      <thead>
            <tr>
                <th>
                    Id
                </th>
                <th>
                     @Html.DisplayNameFor(model => model.Name)
                </th>
                <th>
                   @Html.DisplayNameFor(model => model.ListPrice)
                </th>
                <th>
                      @Html.DisplayNameFor(model => model.DiscountPrice)
                </th>
          </tr>
     </thead>
     <tbody class="mousechange"></tbody>
</table>

1 个答案:

答案 0 :(得分:2)

我通常以这种方式工作,以便在您连续点击时获取数据...

在dataTable()

    $('#tblItemModel tbody').on('click', 'tr', function () {

       var pos = oTable.fnGetPosition(this);
       var row = oTable.fnGetData(pos);//row = It contains all the data in that row

    });

表示DataTable()

    $('#tblItemModel tbody').on('click', 'tr', function () {

       var pos = oTable.row(this).index();
       var row = oTable.row(pos).data();//row = It contains all the data in that row

    });