Fatal编程技术网
  • jquery/
  • Jquery Datatables嵌套表错误404

Jquery Datatables嵌套表错误404

jquery ajax asp.net-mvc datatables

Jquery Datatables嵌套表错误404,jquery,ajax,asp.net-mvc,datatables,Jquery,Ajax,Asp.net Mvc,Datatables,我正在尝试使用jquery datatables创建一个简单的嵌套表。但现在，在单击主行展开detais部分后，我在控制台窗口中只得到404错误。单击后，行中的id应将RD分配给detais tables ajax请求，并应返回数据。猜猜看 先谢谢你 我的Html <table id="example" class="display nowrap" cellspacing="0" width="100%"> <thead> <tr> &

我正在尝试使用jquery datatables创建一个简单的嵌套表。但现在，在单击主行展开detais部分后，我在控制台窗口中只得到404错误。单击后，行中的id应将RD分配给detais tables ajax请求，并应返回数据。猜猜看

先谢谢你

我的Html

<table id="example" class="display nowrap" cellspacing="0" width="100%">
<thead>
    <tr>
        <th></th>
        <th>Item 1</th>
        <th>Item 2</th>
        <th>Item 3</th>
        <th>Item 4</th>
    </tr>
</thead>
<tbody>
    @foreach (var item in Model)
    {


    <tr data-child-value="hidden 1">
        <td class="details-control"></td>
        <td>
            @Html.DisplayFor(modelItem => item.IO_ID)
        </td>

        <th>

            @Html.DisplayFor(model => item.PO_IO_TOPIC)
        </th>

        <td>
            @Html.DisplayFor(modelItem => item.PO_IOU_Client)
        </td>

        <td>
            @Html.DisplayFor(modelItem => item.PO_IO_DOC_NO)
        </td>
    </tr>
    }
    </tbody>
下面是ASP.NET Fiddler链接，查看它的工作情况

在这里，我让它工作，所以你可以比较和找出你做错了什么。注意这些评论。我将为ASP.NET发布一个JSFiddler类型的链接，这样您就可以单击一个链接并查看它的工作情况

cshtml

@model IEnumerable<Testy20161006.Controllers.RangeDataView>
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index62</title>
    <script src="~/Scripts/jquery-1.12.4.min.js"></script>
    <script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
    <link href="~/Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" />
    <script type="text/javascript">
        var dd; // to pass header row data to detail table
        function format(name, value) {
            return '<div id="addToMe" ><table id="example1" cellspacing="0" width="90%">' +
               ' <thead>' +
                '<tr>' +
                '<th></th>' +
               '<th>CI 1</th>' +
                '<th>CI 2</th>' +
                 '</tr>' +
               '</thead>';
        }
        $(document).ready(function () {
            var table = $('#example').DataTable({});
            // Add event listener for opening and closing details
            $('#example').on('click', 'td.details-control', function () {
                var tr = $(this).closest('tr');
                var row = table.row(tr);

                if (row.child.isShown()) {
                    // This row is already open - close it
                    row.child.hide();
                    tr.removeClass('shown');
                } else {
                    row.child(format(tr.data('child-value'))).show();
                    tr.addClass('shown');
                }
                dd = table.cell(this, 1).data();  // asign header id to variable
                var table1 = $('#example1').DataTable({
                    "processing": true,
                    "serverSide": true,
                    "bProcessing": false,
                    "ajax": {
                        //!changed this url to hit my home controller also prefacing with /
                        //"url": "PO_Trn_IOU/IocollectionPickup",
                        "url": "/Home/IocollectionPickup",
                        "contentType": "application/json; charset=utf-8",
                        //!adding the brackets and title matching c# action
                        "data": { "theData": dd }, // assign header row id to get detail data
                        "dataType": "json",
                        "asynch": false,
                        "success": function (theData) {
                            var tbody = $('#example1 tbody')
                            $.each(theData, function (index, value) {
                                var row = $("<tr>");
                                row.append($("<td>").text(value.date));
                                row.append($("<td>").text(value.docno));
                                tbody.append(row);
                            });
                        }
                    },
                });
            });
        });

    </script>
</head>
<body>
    <div id="tempShow" />
    <table id="example" class="display nowrap" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th></th>
                <th>Item 1</th>
                <th>Item 2</th>
                <th>Item 3</th>
                <th>Item 4</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                <tr data-child-value="hidden 1">
                    @*adding the click here so user has something to click into*@
                    <td class="details-control">Click Here to Run Ajax</td>
                    <td>
                        @Html.DisplayFor(modelItem => item.IO_ID)
                    </td>
                    <th>
                        @Html.DisplayFor(model => item.PO_IO_TOPIC)
                    </th>
                    <td>
                        @Html.DisplayFor(modelItem => item.PO_IOU_Client)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.PO_IO_DOC_NO)
                    </td>
                </tr>
            }
        </tbody>
        @*You were missing a table end tag*@
    </table>
</body>
</html>

@model IEnumerable
@{
布局=空；
}
索引62
变量dd；//将标题行数据传递到明细表的步骤
函数格式（名称、值）{
返回“”+
' ' +
'' +
'' +
“CI 1”+
“CI 2”+
'' +
'';
}
$（文档）.ready（函数（）{
变量表=$（'#示例'）。数据表（{}）；
//为打开和关闭详细信息添加事件侦听器
$（'#示例'）。在（'click'，'td.details control'，函数（）{
var tr=$（this.nexist（'tr'）；
var行=表.行（tr）；
if（row.child.isShown（））{
//此行已打开-关闭它
row.child.hide（）；
tr.removeClass（“显示”）；
}否则{
row.child（格式（tr.data（'child-value'））.show（）；
tr.addClass（“显示”）；
}
dd=table.cell（this，1）.data（）；//将头id指定给变量
变量表1=$（'#示例1'）。数据表({
“处理”：对，
“服务器端”：正确，
“b处理”：false，
“ajax”：{
//！将此url更改为命中我的主控制器，并以/
//“url”：“PO_Trn_IOU/IOCollectionPicking”，
“url”：“/Home/IocollectionPickup”，
“contentType”：“application/json；charset=utf-8”，
//！添加括号和标题匹配的c#操作
“数据”：{“theData”：dd}，//分配标题行id以获取详细数据
“数据类型”：“json”，
“异步”：false，
“成功”：功能（数据）{
变量tbody=$（“#示例1 tbody”）
$.each（数据、函数（索引、值）{
变量行=$（“”）；
行.append（$（“”）.text（value.date））；
行.append（$（“”）.text（value.docno））；
tbody.append（行）；
});
}
},
});
});
});
项目1
项目2
项目3
项目4
@foreach（模型中的var项目）
{
@*添加“单击此处”，以便用户可以单击某些内容*@
单击此处运行Ajax
@DisplayFor（modeleItem=>item.IO\u ID）
@DisplayFor（model=>item.PO\u IO\u主题）
@DisplayFor（modelItem=>item.PO\u IOU\u客户端）
@DisplayFor（modeleItem=>item.PO\u IO\u DOC\u NO）
}
@*您丢失了一个桌尾标签*@
代码

//名称空间testy2016 1006.控制器
公共类RangeDataView
{
公共字符串IO_ID{get；set；}
公共字符串PO_IO_主题{get；set；}
公共字符串PO_IOU_客户端{get；set；}
公共字符串PO_IO_DOC_NO{get；set；}
}
公共类POPM\u TRN\u iou选择
{
公共字符串docno{get；set；}
公共字符串日期{get；set；}
}
公共类HomeController:控制器
{
public JsonResult IocollectionPickup（字符串数据）/！更改参数名称
{
//您可以在这里放置一个断点，并查看包含通过ajax传递的值的数据
//模拟数据，以便我可以向您展示
//POPM_TRN_iou选择pop=新的POPM_TRN_iou选择（）；
//iocollection变量=
//从db.PO\u TR\u集合中的c开始
//其中c.IOID==Convert.ToInt16（数据）
//选择新的
//                    {
//文件编号=c.集合\文件编号，
//日期=c.日期
//                    };
List iocollection=新列表（）；
POPM_TRN_iou选择项1=新的POPM_TRN_iou选择{date=“3/5/68”，docno=“doc1”}；
POPM_TRN_iou选择项2=新的POPM_TRN_iou选择{date=“3/5/69”，docno=“doc2”}；
iocollection.Add（第1项）；
iocollection.Add（第2项）；
返回Json（iocollection，JsonRequestBehavior.AllowGet）；
}
公共行动结果索引127（）
{
List dv=新列表（）；
RangeDataView item1=新的RangeDataView{IO_ID=“1”，PO_IO_DOC_NO=“DOC1”，PO_IO_TOPIC=“TOPIC1”，PO_IOU_Client=“CLIENT1”}；
RangeDataView item2=新的RangeDataView{IO_ID=“2”，PO_IO_DOC_NO=“DOC2”，PO_IO_TOPIC=“TOPIC2”，PO_IOU_Client=“CLIENT2”}；
RangeDataView item3=新的RangeDataView{IO_ID=“3”，PO_IO_DOC_NO=“DOC3”，PO_IO_TOPIC=“TOPIC3”，PO_IOU_Client=“CLIENT3”}；
RangeDataView项目4=新的RangeDataView{IO\U ID=

  public JsonResult IocollectionPickup(string data)
    {

        POPM_TRN_IOUColection pop = new POPM_TRN_IOUColection();

        var iocollection = 
                            from c in db.PO_TR_IOColection
                            where c.IOID == Convert.ToInt16(data)
                            select new
                            {                              
                                docno = c.Collection_DocNumber,
                                date = c.date
                            };

        return Json(iocollection, JsonRequestBehavior.AllowGet);

    }



@model IEnumerable<Testy20161006.Controllers.RangeDataView>
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index62</title>
    <script src="~/Scripts/jquery-1.12.4.min.js"></script>
    <script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
    <link href="~/Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" />
    <script type="text/javascript">
        var dd; // to pass header row data to detail table
        function format(name, value) {
            return '<div id="addToMe" ><table id="example1" cellspacing="0" width="90%">' +
               ' <thead>' +
                '<tr>' +
                '<th></th>' +
               '<th>CI 1</th>' +
                '<th>CI 2</th>' +
                 '</tr>' +
               '</thead>';
        }
        $(document).ready(function () {
            var table = $('#example').DataTable({});
            // Add event listener for opening and closing details
            $('#example').on('click', 'td.details-control', function () {
                var tr = $(this).closest('tr');
                var row = table.row(tr);

                if (row.child.isShown()) {
                    // This row is already open - close it
                    row.child.hide();
                    tr.removeClass('shown');
                } else {
                    row.child(format(tr.data('child-value'))).show();
                    tr.addClass('shown');
                }
                dd = table.cell(this, 1).data();  // asign header id to variable
                var table1 = $('#example1').DataTable({
                    "processing": true,
                    "serverSide": true,
                    "bProcessing": false,
                    "ajax": {
                        //!changed this url to hit my home controller also prefacing with /
                        //"url": "PO_Trn_IOU/IocollectionPickup",
                        "url": "/Home/IocollectionPickup",
                        "contentType": "application/json; charset=utf-8",
                        //!adding the brackets and title matching c# action
                        "data": { "theData": dd }, // assign header row id to get detail data
                        "dataType": "json",
                        "asynch": false,
                        "success": function (theData) {
                            var tbody = $('#example1 tbody')
                            $.each(theData, function (index, value) {
                                var row = $("<tr>");
                                row.append($("<td>").text(value.date));
                                row.append($("<td>").text(value.docno));
                                tbody.append(row);
                            });
                        }
                    },
                });
            });
        });

    </script>
</head>
<body>
    <div id="tempShow" />
    <table id="example" class="display nowrap" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th></th>
                <th>Item 1</th>
                <th>Item 2</th>
                <th>Item 3</th>
                <th>Item 4</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                <tr data-child-value="hidden 1">
                    @*adding the click here so user has something to click into*@
                    <td class="details-control">Click Here to Run Ajax</td>
                    <td>
                        @Html.DisplayFor(modelItem => item.IO_ID)
                    </td>
                    <th>
                        @Html.DisplayFor(model => item.PO_IO_TOPIC)
                    </th>
                    <td>
                        @Html.DisplayFor(modelItem => item.PO_IOU_Client)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.PO_IO_DOC_NO)
                    </td>
                </tr>
            }
        </tbody>
        @*You were missing a table end tag*@
    </table>
</body>
</html>



//namespace Testy20161006.Controllers
public class RangeDataView
{
    public string IO_ID { get; set; }
    public string PO_IO_TOPIC { get; set; }
    public string PO_IOU_Client { get; set; }
    public string PO_IO_DOC_NO { get; set; }
}

public class POPM_TRN_IOUColection
{
    public string docno { get; set; }
    public string date { get; set; }
}

public class HomeController : Controller
{
    public JsonResult IocollectionPickup(string theData) //!change parm name
    {
        //you can put a breakpoint here and see theData contains the value passed through ajax

        //MOCKING Data so I can show you

        //POPM_TRN_IOUColection pop = new POPM_TRN_IOUColection();

        //var iocollection =
        //                    from c in db.PO_TR_IOColection
        //                    where c.IOID == Convert.ToInt16(data)
        //                    select new
        //                    {
        //                        docno = c.Collection_DocNumber,
        //                        date = c.date
        //                    };

        List<POPM_TRN_IOUColection> iocollection = new List<POPM_TRN_IOUColection>();
        POPM_TRN_IOUColection item1 = new POPM_TRN_IOUColection { date = "3/5/68", docno = "doc1" };
        POPM_TRN_IOUColection item2 = new POPM_TRN_IOUColection { date = "3/5/69", docno = "doc2" };
        iocollection.Add(item1);
        iocollection.Add(item2);

        return Json(iocollection, JsonRequestBehavior.AllowGet);
    }

    public ActionResult Index127()
    {
        List<RangeDataView> dv = new List<RangeDataView>();
        RangeDataView item1 = new RangeDataView { IO_ID = "1", PO_IO_DOC_NO = "DOC1", PO_IO_TOPIC = "TOPIC1", PO_IOU_Client = "CLIENT1" };
        RangeDataView item2 = new RangeDataView { IO_ID = "2", PO_IO_DOC_NO = "DOC2", PO_IO_TOPIC = "TOPIC2", PO_IOU_Client = "CLIENT2" };
        RangeDataView item3 = new RangeDataView { IO_ID = "3", PO_IO_DOC_NO = "DOC3", PO_IO_TOPIC = "TOPIC3", PO_IOU_Client = "CLIENT3" };
        RangeDataView item4 = new RangeDataView { IO_ID = "4", PO_IO_DOC_NO = "DOC4", PO_IO_TOPIC = "TOPIC4", PO_IOU_Client = "CLIENT4" };
        dv.Add(item1);
        dv.Add(item2);
        dv.Add(item3);
        dv.Add(item4);
        return View(dv);
    }