如何从表中选择两列数据？答案

【问题标题】：How to select two columns data from the table?如何从表中选择两列数据？
【发布时间】：2011-06-21 11:21:20
【问题描述】：

我想选择表格的两列并作为数组进行进一步处理。

从 $.post() 调用我得到以下形式的 Json：

{"sEcho": 26,
 "iTotalRecords": 26,
 "iTotalDisplayRecords": 10,
 "aaData": [[ "20090301","60"],
            [ "20090302","253"],
            [ "20090303","108"],
            [ "20090304","166"],
... [snip] ...
            [ "20090327","209"],
            [ "20090328","452"],
            [ "20090329","450"],
            [ "20090330","143"] 
           ],
 "aoColumns": [{"sTitle": "The observed Date"},
               {"sTitle": "number of objects"}
              ]
}

然后我将表格显示为：

$('#queryTable').dataTable(jsondata);

在哪里

<table class="display" id="queryTable"></table>

我想在表格的列上添加点击事件，这将返回我 javascript Array。

如何获取数据表中的整列？

【问题讨论】：

请通过添加这些内容来重新表述问题。确认数据来源（ajax、javascript 数组）并尽可能放置示例数据

标签： jquery datatable jquery-plugins html-table

【解决方案1】：

这样的事情可能会起作用：

    var myTable = $("#queryTable").dataTable(
    {
        "aaData": myData,
        "aoColumns": myColumns
    }
);
myDataArray = myTable.fnGetData();

myColumnArray = []
$("#queryTable thead tr th").click(function()
    {
        var index = $(this).index();
        for (var i = 0; i < myTable.fnSettings().fnRecordsTotal(); i++)
        {
            myColumnArray[i] = myDataArray[i][index];
        }
    }
);

这是一个工作示例：http://jsfiddle.net/srMZR/5/。单击列标题以获取该列的数据数组。

【讨论】：

非常好！正是我需要的，谢谢。

【解决方案2】：

这可能会有所帮助： http://www.bramstein.com/projects/column/

【讨论】：

【解决方案3】：

嗯，亚当的答案是你所需要的（正如你已经回答过的那样），但这是一种（有点困难的）方法。由于我工作了一段时间，我会继续发布它。 :)

http://jsfiddle.net/bXBhZ/4/

基本上，我只是遍历表格行，然后使用子选择器 :eg() 来获取第 1 列和第 2 列。

请注意，我这样做两次的唯一原因是确保它正常工作（确实如此，从显示下拉菜单中查看 select 25 并转到第 2 页）。

你想看到的是：

$('#queryTable tbody tr').each(function(){
    var date = $(this).children('td:eq(0)').text();
    var obj = $(this).children('td:eq(1)').text();
    ...
});

基本上，我所做的是通过将所有行复制到 JSON 数组中来复制表（两次...），然后制作另一个 DataTable。我使用一个pre标签来保存数组文本，并使用jQuery.parseJSON()来使用。

所以，如果出于某种原因你想这样做，这里有一个例子。

HTML

<table class="display" id="queryTable"></table>
<table class="display" id="queryTable2"></table>
<br style="clear: both;"/>
<pre id="json"></pre>

Javascript

var jsondata = {"sEcho": 26,
                "iTotalRecords": 26,
                 "iTotalDisplayRecords": 10,
                 "aaData": [[ "20090301","60"],
                            [ "20090302","253"],
                            [ "20090303","108"],
                            [ "20090304","166"],
                            [ "20090327","209"],
                            [ "20090328","452"],
                            [ "20090329","450"],
                            [ "20090330","143"]
                           ],
                 "aoColumns": [{"sTitle": "The observed Date"},
                               {"sTitle": "number of objects"}
                              ]
};

$('#queryTable').dataTable(jsondata);

var numrows = 1;

$('#queryTable tbody tr').each(function(){
    var date = $(this).children('td:eq(0)').text();
    var obj = $(this).children('td:eq(1)').text();
    var row = "[\""+date+"\",\""+obj+"\"],\n";
    row =  numrows == 1 ? "["+row : row;
    $('#json').append(row);
    numrows++;
});

numrows = 1;

$('#queryTable tbody tr').each(function(){
    var date = $(this).children('td:eq(0)').text();
    var obj = $(this).children('td:eq(1)').text();
    var comma = $('#queryTable tbody tr').length != numrows ? "," : "]";
    var row = "[\""+date+"\",\""+obj+"\"]"+comma+"\n";
    //row =  numrows == 1 ? "["+row : row;
    $('#json').append(row);
    numrows++;
});

var jsondata2 = jsondata;
jsondata2.aaData = jQuery.parseJSON($('#json').text());

$('#queryTable2').dataTable(jsondata2);

【讨论】：