在Javascript中从Datatables.Net获取ID列表

时间:2012-12-24 12:57:44

标签: javascript jquery json asp.net-mvc-3 datatables

我有一个ASP.NET MVC 3网站 - 在特定页面上我使用了datatables.net插件来表。我已经在我的标记中包含了一个表格左侧的复选框,单击该复选框时将突出显示该行。用户可以选择多行。当用户点击按钮时,我想将所有行的ID传递回我的Controller,然后在数据库中进行一些工作。

我想以JSON格式传回ID,以便在控制器中反序列化数据。

到目前为止,我也是这样。

$('#UseCars').click(function (event) {

    var cars = new Array();

    carsTable.find("tr input:checkbox").each(function () {

        var car = new Object();
        //alert($(this).attr("CarID"));
        car.ID = $(this).attr("CarID");
        //alert(car.ID);

        cars.push(car);

    });

    var jsonstring = $.toJSON(cars);

    $('#CarsList').val(jsonstring);

});

所以在我的cshtml上我有一个隐藏的CarsList,这是我模型上的一个字符串。当我在控制器中为我的方法设置断点时,UseCars按钮调用我可以看到model.CarsList的值是一个强大的字符串,但是它找到了表中的所有复选框而不是特定的seletec并且它没有拉行的id值也可以。

有人能看到我在这里失踪的东西吗?

已编辑包含CSHTML MARKUP

所以这是我在桌面上的标记。

   <table id="carsTable" style="margin-left: 2px; width: 200px">
                            <thead>
                                <tr>
                                    <th class="ui-widget-header">
                                        <input id="SelectAll" type="checkbox" />
                                    </th>
                                    <th class="ui-widget-header table-header">
                                    </th>
                                    <th class="ui-widget-header table-header">
                                        Age of Car (Years)
                                    </th>
                                    <th class="ui-widget-header table-header">
                                        Car Name
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach (var item in Model.CarList)
                                {
                                    <tr>
                                        <td class="table-data">
                                            <input id="SelectIndividual" name="Select" type="checkbox" />
                                        </td>
                                        <td id="InvoiceId">
                                            @Html.DisplayFor(modelItem => item.CarID)
                                        </td>
                                        <td class="table-data">
                                            @Html.DisplayFor(modelItem => item.CarAge)
                                        </td>
                                        <td class="table-data">
                                            @Html.DisplayFor(modelItem => item.CarName)
                                        </td>
                                    </tr>
                                }
                            </tbody>
                        </table>

然后在我的js文件中为DataTable表配置的页面将ID列设置为bvisible:false,因此它实际上并未显示给用户。我更改了Daniel提到的id选择,所以它现在看起来像 - car.ID = $(this).next(“CarId”);

在我在控制器的断点中,我可以看到信息现在已经返回,但不完全是我所期待的 - 也就是说我希望我的字符串会像[{123},{124}]但是我得到的输出就像:

"[{\"ID\":{\"length\":0,\"prevObject\":{\"0\":{\"jQuery183036556275907670765\":227},\"context\":{\"jQuery183036556275907670765\":227},\"length\":1},\"context\":{\"jQuery183036556275907670765\":227},\"selector\":\".next(CarId)\"}}]"

2 个答案:

答案 0 :(得分:1)

尝试使用以下选择器$("td input:checked")

$("td input:checked").each(function (index, para) {
    var car = new Object();
    //alert($(this).attr("CarID"));
    car.ID = $(this).attr("CarID");
    //alert(car.ID);

    cars.push(car);
});

更好的是使用表格ID,例如$("#myTableId td input:checked").each...

答案 1 :(得分:0)

替换

carsTable.find("tr input:checkbox").each(function () {

使用

carsTable.find("tr input:checked").each(function () {

jquery / js debugger不可靠使用console.log()而不是