从jquery数据表中的列过滤器中获取值

时间:2014-12-17 05:28:26

标签: jquery jquery-datatables jquery-datatables-editor

我在我的应用程序中使用jquery数据表,并使用服务器端处理进行分页并将数据导出为CSV。

      $(function  (){
            $('#dataTable-my tfoot th').each( function (index) {
                var title = $('#dataTable-my thead th').eq( $(this).index() ).text();
                  $(this).html( '<input type="text" placeholder="Filter" class="form-control input-sm ng-pristine ng-valid" size="10"/>' );
            });
            var table = $('#dataTable-my').DataTable( {
                "jQueryUI": true,
                "dom": 'T<"clear">lfrtip',
                "sPaginationType": "full_numbers",
                "bServerSide": true,
                "sAjaxSource": HOST_URL+"/students/",
                "sServerMethod": "GET",
                "bFilter": true,
                "oSearch": {"bRegex":true, "bSmart": false},
                "oTableTools": {
                    "aButtons": [
                        {
                            "sExtends": "ajax",
                            "sButtonText":"Save as CSV",
                            "sToolTip": "Save as CSV",
                            "sButtonClass": "my_button_class",
                            "fnClick": function () {
                                var ajaxUrl=HOST_URL+"/students/?export=true";
                                var searchKeyword=table.search( this.value);
                                if (searchKeyword){
                                    ajaxUrl=ajaxUrl.concat("&sSearch="+searchKeyword);
                                }
                                var iframe = document.createElement('iframe');
                                iframe.style.height = "0px";
                                iframe.style.width = "0px";
                                iframe.src = ajaxUrl;
                                document.body.appendChild( iframe );
                            }
                        }
                    ]
                },
                initComplete: function ()
                {
                    var r = $('#dataTable-my tfoot tr');
                    r.find('th').each(function(){
                        $(this).css('padding', 8);
                    });
                    $('#dataTable-my thead').append(r);
                    $('#search_0').css('text-align', 'center');
                },
                "bAutoWidth": false,
                "aoColumns": [
                    { "mData": "name" },
                    { "mData": "age" },
                    { "mData": "location" }
                ]
            })
            $('#dataTable-my').DataTable();
            table.columns().eq( 0 ).each( function ( colIdx ) {
                $( 'input', table.column( colIdx ).footer() ).on( 'keyup change', function () {
                    table
                        .column( colIdx )
                        .search( this.value )
                        .draw();
                } );
            } );
        });

上述代码会覆盖导出功能,并将全局搜索中的值作为参数传递。现在,由于我的数据表启用了多列过滤,我还需要将列中输入的关键字作为请求参数传递。

如何获取fnClick方法中的列过滤器内输入的值,我可以在进行ajax调用时传递请求参数。

我尝试使用table.row(0).data(),但我得到的是行值,而不是列值。

请让我知道我哪里出错。

此致 普拉迪普

1 个答案:

答案 0 :(得分:0)

我使用下面的代码来获取列值并形成网址。

                         "fnClick": function () {
                                var ajaxUrl=HOST_URL+"/students/?export=true";
                                var searchKeyword=table.search( this.value);
                                if (searchKeyword){
                                    ajaxUrl=ajaxUrl.concat("&sSearch="+searchKeyword);
                                }
                                //append the search keywords from the individual columns..
                                for (var index = 0; index < 8; index++ ) {
                                    ajaxUrl = ajaxUrl.concat("&sSearch_"+index+"=" + (table.column( index ).search( this.value ) || ''));
                                }

                                var iframe = document.createElement('iframe');
                                iframe.style.height = "0px";
                                iframe.style.width = "0px";
                                iframe.src = ajaxUrl;
                                document.body.appendChild( iframe );
                            }

其余代码保持不变。具体而言,以下代码可用于获取列详细信息:

table.column( index ).search( this.value )