Question

我的视图在页面中包含两个表。

<table class="projectReq-table" id="FN-requirement-list">
     <thead>
          <tr>
               <th>No.</th>
               <th>Requirement</th>
           </tr>
     </thead>
     <tbody>
         @{var counterFN = 0;}
         @foreach (var item in Model.FunctionalRequirements)
         {
              <tr id="@item.RequirementSequence">
                  <td class="tdFN-requirement-number">@(++counterFN)</td>
                  <td class="tdFN requirement-sentence">@item.RequirementSentence</td>
              </tr>
         }
     </tbody>
</table>

<table class="projectReq-table" id="NF-requirement-list">
     <thead>
          <tr>
               <th>No.</th>
               <th>Requirement</th>
           </tr>
     </thead>
     <tbody>
         @{var counterNF = 0;}
         @foreach (var item in Model.NonFunctionalRequirements)
         {
              <tr id="@item.RequirementSequence">
                  <td class="tdNF-requirement-number">@(++counterNF)</td>
                  <td class="tdNF-requirement-sentence">@item.RequirementSentence</td>
              </tr>
         }
     </tbody>
</table>

我想使用jQuery dataTables的功能将行拖放到另一个位置。但它仅适用于标识为FN-requirement-list的表。这是我的dataTable脚本：

$(document).ready(function () {
    $('#FN-requirement-list').dataTable({
        "bPaginate": false,
        "bLengthChange": false,
        "bFilter": false,
        "bSort": false,
        "bInfo": false,
        "bAutoWidth": false,
        "asStripClasses": null,
        "columns": [
            null,
            null,
            {
                "data": "item",
                "defaultContent": ""
            }
        ]
    })
        .rowReordering({
            sURL: '@Url.Action("UpdateSequence", "Requirement", new { ot = "fn" })'
        });

    $('#NF-requirement-list').dataTable({
        "bPaginate": false,
        "bLengthChange": false,
        "bFilter": false,
        "bSort": false,
        "bInfo": false,
        "bAutoWidth": false,
        "asStripClasses": null,
        "columns": [
            null,
            null,
            {
                "data": "item",
                "defaultContent": ""
            }
        ]
    })
        .rowReordering({
            sURL: '@Url.Action("UpdateSequence", "Requirement", new { ot = "nf" })'
        });
});

每个.rowReordering函数调用UpdateSequence中的函数RequirementController，但使用不同的参数，您可以看到fn和nf。这是RequirementController中的UpdateSequence函数：

[HttpPost]
public ActionResult UpdateSequence(int id, int fromPosition, int toPosition, string direction, string ot)
{
    ...
}

我已经跟踪了传递给函数的参数，它只适用于第一个表，FN-requirement-list。

例如，当我将FN-requirement-list表的第二行拖到第一行并将参数发送到函数时

id = 2
fromPosition = 2
toPosition = 1
direction = back
ot = fn

但是当我用NF-requirement-list表尝试同样的事情时，它会将参数发送到这样的函数

id = 2
fromPosition = 2
toPosition = 2
direction = back
ot = nf

它不适用于NF-requirement-list表，没有toPosition传递给函数。

我该如何解决这个问题？我听说过一个页面不能使用多个jQuery数据表的问题，但我不知道如何解决这个问题。

无法在一个页面中使用多个jQuery dataTable

0 个答案: