【问题标题】：Two Datatables in One Page一页中的两个数据表
【发布时间】：2013-10-12 04:27:14
【问题描述】：

嗨，我在 MVC 3 的一个部分上有两个数据表，一个显示 Table_1，一个在底部显示 Table_2。我希望有这样的功能，当我双击数据表 1（在行）时，它将弹出 Datatables 2 formAddNewRow。有没有办法做到这一点？加上 Datatables 1 ID 将被发送到弹出表单。

目前我的部分观点确实有这个：

<script type="text/javascript">
    $(document).ready(function () {
        $('#myItemPrice').dataTable({
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": '../AjaxItemPriceProvider?id=@ViewBag.ID',
            "sPaginationType": "full_numbers",
            "aoColumns": [
                                { "sName": "ID",
                                    "bSearchable": false,
                                    "bSortable": false,
                                    "bVisible": true
                                },
                                { "sName": "PDSID",
                                    "bSearchable": false,
                                    "bSortable": false,
                                    "bVisible": false
                                },
                                { "sName": "PID" },
                                { "sName": "EffDate" },
                                { "sName": "ExpDate" },
                                { "sName": "G140" },
                                { "sName": "AccID" },
                                { "sName": "CCID" }

                            ]
        });
    });

    $(document).ready(function () {
        $('#myTierPrice').dataTable({
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": '../AjaxTierPriceProvider?id=@ViewBag.ID',
            "sPaginationType": "full_numbers",
            "aoColumns": [
                                { "sName": "ID",
                                    "bSearchable": false,
                                    "bSortable": false,
                                    "bVisible": false
                                },
                                { "sName": "IPFID",
                                    "bSearchable": false,
                                    "bSortable": false,
                                    "bVisible": false
                                },
                                { "sName": "Quantity" },
                                { "sName": "Amount" },
                                { "sName": "Maximum Discount Percentage" },
                                { "sName": "Maximum Discount Amount" },
                                { "sName": "Tax 1" },
                                { "sName": "Tax 2" },
                                { "sName": "Commission" }

                            ]
        }).makeEditable({
            sUpdateURL: "../TierPriceUpdate",
            sAddURL: "../TierPriceAdd",
            sDeleteURL: "../TierPriceDelete"
        });
    });
</script>
<div class="clear">
</div>
<div id="itemPrice">
<h2>Item Pricing List</h2>
    <table id="myItemPrice" class="display">
        <thead>
            <th>
                ID
            </th>
            <th>
                PDSID
            </th>
            <th>
                PID
            </th>
            <th>
                Effective Date
            </th>
            <th>
                Expiry Date
            </th>
            <th>
                G140
            </th>
            <th>
                AccID
            </th>
            <th>
                CCID
            </th>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
            <th>
                ID
            </th>
            <th>
                PDSID
            </th>
            <th>
                PID
            </th>
            <th>
                Effective Date
            </th>
            <th>
                Expiry Date
            </th>
            <th>
                G140
            </th>
            <th>
                AccID
            </th>
            <th>
                CCID
            </th>
        </tfoot>
    </table>
</div>
<div class="clear"></div><br />
    <div id="itemPrice">
    <h2>Item Tier Price List</h2>
    <table id="myTierPrice" class="display">
    <thead>
        <th>ID</th>
        <th>IPFID</th>
        <th>Quantity</th>
        <th>Amount</th>
        <th>Maximum Discount Percentage</th>
        <th>Maximum Discount Amount</th>
        <th>Tax 1</th>
        <th>Tax 2</th>
        <th>Commission</th>
    </thead>
    <tbody>
    </tbody>
    <tfoot>
        <th>ID</th>
        <th>IPFID</th>
        <th>Quantity</th>
        <th>Amount</th>
        <th>Maximum Discount Percentage</th>
        <th>Maximum Discount Amount</th>
        <th>Tax 1</th>
        <th>Tax 2</th>
        <th>Commission</th>
    </tfoot>
    </table>
    </div>
    <div>
    <button id="btnAddNewRow" value="Ok">
        Add New Tier Price</button>
    <button id="btnDeleteRow" value="cancel">
        Delete Tier Price</button>
    </div>
    <form id="formAddNewRow" action="#" title="New Tier Price Settings">
<input type="hidden" name="ID" id="ID" value="-1" rel="0" />
<label>
    Price ID</label><br />
<input type="text" name="IPFID" id="IPFID" rel="2" /><br />
<br />
<label>
    Quantity</label><br />
<input type="text" name="Qty" id="Qty" rel="2" /><br />
<br />
<label>
    Amount</label><br />
<input type="text" name="Amt" id="Amt" rel="3" /><br />
<font color="green">Leave empty to use default pricing</font><br />
<br />
<label>
    Maximum Discount Percent</label><br />
<input type="text" name="MaxDiscPct" id="MaxDiscPct" rel="4" /><br />
<br />
<label>
    Maximum Discount Amount</label><br />
<input type="text" name="MaxDiscAmt" id="MaxDiscAmt" rel="5" /><br />
<br />
<table style="border-style:none;">
<tr><td>
<label>
    Tax 1</label><br />
<input type="text" name="Tax1" id="Tax1" rel="6" style="width:90px;" /><br />
<br /></td>
<td>
<label>
    Tax 2</label><br />
<input type="text" name="Tax2" id="Tax2" rel="7"  style="width:90px;" /><br />
<br /></td>
</tr>
</table>
<label>
    Commission</label><br />
<input type="text" name="Comm" id="Comm" rel="7" /><br />
<br />
</form>

任何提示和指南将不胜感激。谢谢。

【问题讨论】：

标签： asp.net-mvc-3 razor jquery-datatables

【解决方案1】：

我花了几个小时（！）为您重写代码。 You can download it here

环境

Windows 7，64 位
在 Visual Studio 2010 SP1 中开发
使用 ASP.NET 4.0 MVC 3.0
已通过 Internet Explorer 9.0 和 Firefox 7.0.1 测试

基础设施

我的 _Layout.cshtml 块中有以下链接和脚本。

<head>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
</head>

我在项目中添加了 3 个文件夹：

\Models\ 其中包含 TierPrice.cs
\Services\ 其中包含：FakeRepository1.cs 和 FakeRepository2.cs
\Scripts\DataTables 包含 jquery.dataTables.js 及其相关文件

我将其他文件夹和文件保留在新的 ASP.NET MVC 3 项目中。

注意：我注释掉了 .makeEditable() 方法（jquery.dataTables.editable 插件），因为我从未使用过它。

TierPrice 类

一个表示 TierPrice 的简单类。

public class TierPrice
{
    public int ID { get; set; }
    public int IPFID { get; set; }
    public int Qty { get; set; }
    public int Amt { get; set; }
    public int MaxDiscPct { get; set; }
    public int MaxDiscAmt { get; set; }
    public int Tax1 { get; set; }
    public int Tax2 { get; set; }
    public int Comm { get; set; }
}

虚假仓库

两个不同的假存储库只是为了模仿两个不同的数据库。

家庭控制器

项目中唯一的控制器。没什么特别的。

索引法

public ActionResult Index()
{
    ViewBag.ID = 1; // ID of table?
    return View();
}

AjaxItemPriceProvider 和 AjaxTierPriceProvider 是两个 JsonResult 方法，为视图中的两个 dataTables 提供数据。

    public JsonResult AjaxItemPriceProvider (int id)
    {
        /* =======================================
         Description of parameters

         * INPUT PARAMETERS:
         iDisplayLength: Number of rows in each page 
         iDisplayStart: The Number of the row that will be shown from it to iDisplayLength
         sSearch: Seach phrase
         iSortCol_0 (_n): Name of Sort field
         sSortDir_0 (_n): Direction of the sort

         * OUTPUT PARAMETERS:
         sEcho: Number of calling this method via dataTables-AJAX (1-base: in first call sEcho is 1)
         iTotalRecords: Number of total records
         iTotalDisplayRecords: 
         aaData: Return data in string array format
        * =======================================
        */

        string[][] ItemPriceRows = FakeRepository1.GetAllItemPrices(id);

        Dictionary<string, object> result = new Dictionary<string, object>();
        result.Add("sEcho", Request["sEcho"]);
        result.Add("iTotalRecords", ItemPriceRows.Length);
        result.Add("iTotalDisplayRecords", ItemPriceRows.Length);
        result.Add("aaData", ItemPriceRows);

        JsonResult json = Json(result, JsonRequestBehavior.AllowGet);
        return json;
    }

    public JsonResult AjaxTierPriceProvider (int id)
    {
        string[][] TierPriceRows = FakeRepository2.GetAllTierPrices(id);

        Dictionary<string, object> result = new Dictionary<string, object>();
        result.Add("sEcho", Request["sEcho"]);
        result.Add("iTotalRecords", TierPriceRows.Length);
        result.Add("iTotalDisplayRecords", TierPriceRows.Length);
        result.Add("aaData", TierPriceRows);

        JsonResult json = Json(result, JsonRequestBehavior.AllowGet);
        return json;
    }

注意：ID（即 ViewBag.ID）被传递给这些方法，而方法将其传递给假存储库。但在这个示例中，存储库实际上并不关心它们，只是返回虚假数据。

最后是一个接受新行（TierPrice）的简单方法，当然是通过 POST 操作：

    [HttpPost]
    public String AjaxAddNewTierPrice(TierPrice newTierPrice)
    {
        // TierPrice calss is defined in Models\TierPrice.cs
        string addReult = FakeRepository2.AddTierPrice(newTierPrice);
        return addReult;
    }

查看

视图可能看起来有点复杂，但事实并非如此。

注意我如何描述dataTables的AJAX路径：

"sAjaxSource": '@Url.Action("AjaxItemPriceProvider", new { id = ViewBag.ID })',

然后在 myItemPrice 数据表中，第一列定义如下：

{ "sName": "ID",
  "fnRender": function (oObj) { return renderAddNewRowLink(oObj); },
  "aTargets": [0],
  ...
},

renderAddNewRowLink() 很简单：

function renderAddNewRowLink(obj) {
    var hyperlink = "<a href='javascript:void(0)' ";
    hyperlink += "onclick='showFormAddNewRow("
    hyperlink += obj.aData[0];
    hyperlink += ")'>";
    hyperlink += obj.aData[0];
    hyperlink += "</a>";
    return hyperlink;
}

注意：oObj 是dataTable 插件的容器对象。它应该被传递给 renderAddNewRowLink()，所以函数可以访问包含来自 AJAX 调用的数据的 obj.aData 数组。

好的。我们快到了。 showFormAddNewRow() 也非常简单直接。看看：

function showFormAddNewRow(id) {
    $('#divAddNewRow').show();
    $('#divCoverBg').show();
    $('#formAddNewRow #ID').val(id);
}

注意：$('#formAddNewRow #ID').val(id) 是将 ID 从 myItemPrice 表传递到 formAddNewRow 表单的键。

如果你熟悉Ajax.BeginForm，剩下的就很清楚了，如果不熟悉，这是一个很好的例子：Using Ajax.BeginForm with ASP.NET MVC 3 Razor

注意：每次添加新的 TierPrice 后，以下函数都会强制 myTierPrice dataTable 刷新自身（通过调用 AjaxTierPriceProvider）。

function addNewTierPriceCompleted(obj) {
    TierPriceTable.fnDraw();
}

我还在 site.css 中添加了 2 种样式。添加新行的过程需要这些样式。

【讨论】：