具有数据表的特定列过滤器

时间:2012-05-30 12:25:09

标签: jquery-plugins datatables

<script type="text/javascript" charset="utf-8">
//initialisation code
    $(document).ready(function() {
        $('#example').dataTable( {
             "sPaginationType": "full_numbers",



        } );
    } );

    var asInitVals = new Array();

    $(document).ready(function() {

        $("tfoot input").each( function (i) {
            asInitVals[i] = this.value;
        } );


        $("tfoot input").focus( function () {
            if ( this.className == "search_init" )
            {
                this.className = "";
                this.value = "";
            }
        } );
        $("tfoot input").blur( function (i) {
            if ( this.value == "" )
            {
                this.className = "search_init";
                this.value = asInitVals[$("tfoot input").index(this)];
            }
        } );

        var oTable = $('.exam').dataTable( {
            "oLanguage": {
                "sSearch": "Search all columns:"
            },
            "bStateSave": true,
            "fnInitComplete": function() {
                var oSettings = $('.exam').dataTable().fnSettings();
                for ( var i=0 ; i<oSettings.aoPreSearchCols.length ; i++ ){
                    if(oSettings.aoPreSearchCols[i].sSearch.length>0){
                        $("tfoot input")[i].value = oSettings.aoPreSearchCols[i].sSearch;
                        $("tfoot input")[i].className = "";
                    }
                }
            }
        } );

        $("tfoot input").keyup( function () {
            /* Filter on the column (the index) of this element */
            oTable.fnFilter( this.value, $("tfoot input").index(this) );
        } );

    } );
</script>

</head>

<body>

<table id="example" class = "exam" width="100%" border="1" cellpadding="0" cellspacing="0" class="pretty" align="center">

我是jquery编程的新手。当我在浏览器中查看表时,我看到了错误:

  

数据表警告(table id ='example'):无法重新初始化数据   表。要检索此表的数据表对象,请传递否   参数或查看bRetrieve和bDestroy的文档

如何解决这个问题??

1 个答案:

答案 0 :(得分:0)

您正尝试将同一个表初始化两次。首先,你正在运行

 $(document).ready(function() {
    $('#example').dataTable( {
         "sPaginationType": "full_numbers",



    } );
} );

尝试使用示例ID初始化表上的数据表。然后你尝试在这里再次初始化它:

var oTable = $('.exam').dataTable( {
        "oLanguage": {
            "sSearch": "Search all columns:"
        },
        "bStateSave": true,
        "fnInitComplete": function() {
            var oSettings = $('.exam').dataTable().fnSettings();
            for ( var i=0 ; i<oSettings.aoPreSearchCols.length ; i++ ){
                if(oSettings.aoPreSearchCols[i].sSearch.length>0){
                    $("tfoot input")[i].value = oSettings.aoPreSearchCols[i].sSearch;
                    $("tfoot input")[i].className = "";
                }
            }
        }
    } );

在这里,您正在使用考试类初始化表格。在这种情况下,带有类考试的表和示例的ID是相同的表。错误基本上是说,嘿,我已经初步化了这个表一次,我再也不能这样做了。

删除第一个代码块,它应该可以解决您的问题。