如何使用datatable在sSearch中推送数据?

时间:2014-08-19 07:04:31

标签: javascript jquery jquery-datatables

我有一个正常工作的数据表,现在我想添加一个过滤器,我添加了一个带有提交按钮的输入。基本上数据表有一个已经过滤的,当用户写一些ajax调用去服务器时,(On debugging)数据表过滤器值显示等于sSearch,现在我想要这个,当前(添加字段)ajax调用也当用户但其值不显示等于sSearch时。任何人都可以告诉我如何解决这个问题?先谢谢

$(function(){
    /////////////////////////////////////////////////////////////////////
    // dataTables default values / settings starts {
    /////////////////////////////////////////////////////////////////////

    // bootstrap
    $.extend( $.fn.dataTableExt.oPagination, {
        "bootstrap": {
            "fnInit": function( oSettings, nPaging, fnDraw ) {
                var oLang = oSettings.oLanguage.oPaginate;
                var fnClickHandler = function ( e ) {
                    e.preventDefault();
                    if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) {
                        fnDraw( oSettings );
                    }
                };

                $(nPaging).addClass('pagination').append(
                    '<ul>'+
                        '<li class="prev disabled"><a href="#">&larr; '+oLang.sPrevious+'</a></li>'+
                        '<li class="next disabled"><a href="#">'+oLang.sNext+' &rarr; </a></li>'+
                    '</ul>'
                );
                var els = $('a', nPaging);
                $(els[0]).bind( 'click.DT', { action: "previous" }, fnClickHandler );
                $(els[1]).bind( 'click.DT', { action: "next" }, fnClickHandler );
            },

            "fnUpdate": function ( oSettings, fnDraw ) {
                var iListLength = 5;
                var oPaging = oSettings.oInstance.fnPagingInfo();
                var an = oSettings.aanFeatures.p;
                var i, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2);

                if ( oPaging.iTotalPages < iListLength) {
                    iStart = 1;
                    iEnd = oPaging.iTotalPages;
                }
                else if ( oPaging.iPage <= iHalf ) {
                    iStart = 1;
                    iEnd = iListLength;
                } else if ( oPaging.iPage >= (oPaging.iTotalPages-iHalf) ) {
                    iStart = oPaging.iTotalPages - iListLength + 1;
                    iEnd = oPaging.iTotalPages;
                } else {
                    iStart = oPaging.iPage - iHalf + 1;
                    iEnd = iStart + iListLength - 1;
                }

                for ( i=0, iLen=an.length ; i<iLen ; i++ ) {
                    // remove the middle elements
                    $('li:gt(0)', an[i]).filter(':not(:last)').remove();

                    // add the new list items and their event handlers
                    for ( j=iStart ; j<=iEnd ; j++ ) {
                        sClass = (j==oPaging.iPage+1) ? 'class="active"' : '';
                        $('<li '+sClass+'><a href="#">'+j+'</a></li>')
                            .insertBefore( $('li:last', an[i])[0] )
                            .bind('click', function (e) {
                                e.preventDefault();
                                oSettings._iDisplayStart = (parseInt($('a', this).text(),10)-1) * oPaging.iLength;
                                fnDraw( oSettings );
                            } );
                    }

                    // add / remove disabled classes from the static elements
                    if ( oPaging.iPage === 0 ) {
                        $('li:first', an[i]).addClass('disabled');
                    } else {
                        $('li:first', an[i]).removeClass('disabled');
                    }

                    if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) {
                        $('li:last', an[i]).addClass('disabled');
                    } else {
                        $('li:last', an[i]).removeClass('disabled');
                    }
                }
            }
        }
    }); // bootstrap ends

    // additional functions for data table
    $.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
    {
        /*console.log( "iStart: " + oSettings._iDisplayStart );
        console.log( "iEnd: " + oSettings.fnDisplayEnd );
        console.log( "iLength: " + oSettings._iDisplayLength );
        console.log( "iTotal: " + oSettings.fnRecordsTotal() );
        console.log( "iFilteredTotal: " + oSettings.fnRecordsDisplay() );
        console.log( "iPage: " + Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ) );
        console.log( "iTotalPages: " + Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength ) );*/

        return {
            "iStart":         oSettings._iDisplayStart,
            "iEnd":           oSettings.fnDisplayEnd(),
            "iLength":        oSettings._iDisplayLength,
            "iTotal":         oSettings.fnRecordsTotal(),
            "iFilteredTotal": oSettings.fnRecordsDisplay(),
            "iPage":          Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
            "iTotalPages":    Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
        };
    } // ends

    // error throwing method
    $.fn.dataTableExt.sErrMode = 'throw';

    // dataTable default settings
    var oDefault_dataTables = {

        // sDom {
        "sDom": "<'row-fluid'" + //---------------- 1: row-fluid starts
                    "<'span12'" + //----------------2: span12 starts
                        //"<'span1'C>" + 
                        "<'span2'l>" +
                        "<'span10'f>" +
                        //"<'span6'T>" +
                    ">" + // 2: span12 ends
                ">" + // 1: row-fluid ends
                "<'center'r>" +
                "<'row-fluid'" + //---------------- 1: row-fluid starts
                    "<'row-fluid't>" +//---------------- 3: tbl row-fluid starts & ends
                ">" + // 1: row-fluid ends

                "<'row-fluid'" + //---------------- 1: row-fluid starts
                    "<'span12'>" + //---------------- 4: span12 starts
                    "<'span12 center'lp>" +
                    "<'span12 center'>" +
                ">", // 1: row-fluid ends
        //////////////////////////////////////////////
        /*********************************************
        l - Length changing // record limit dropdown
        f - Filtering input // Search Box
        t - The table!
        i - Information
        p - Pagination
        r - pRocessing
        < and > - div elements
        <"class" and > - div with a class
        Examples: <"wrapper"flipt>, <lf<t>ip>
        *********************************************/
        ////////////////////////////////////////////// }

        //------------------------------------------------------------------------
        // basic setup {
        //------------------------------------------------------------------------
        "bJQueryUI": true,
        "bAutoWidth": true, // Enable or disable automatic column width calculation
        "bDeferRender": true,
        "oLanguage": {
            "sLengthMenu": "_MENU_",
            "sZeroRecords": "No records to display",
            "sProcessing": "<img src='" + THEMEURL + "img/ajax_loaders/ajax-loader-5.gif'>",
            "sSearch": "",
        },
        // }

        //------------------------------------------------------------------------
        // pagination setup {
        //------------------------------------------------------------------------
        "bPaginate": true,
        "sPaginationType": "bootstrap", // [bootstrap, full_numbers, simple, simple_numbers, full]
        "iDisplayStart": 0, // where to start from db
        "iDisplayLength": DATATABLE_LIMIT, // db Limit
        "aLengthMenu": DATATABLE_aLengthMenu, //[[5, 15, 25, 50, 100], [5, 15, 25, 50, 100]], // record get limit dropdown
        // }

        //------------------------------------------------------------------------
        // server side setup
        //------------------------------------------------------------------------
        "bServerSide": true,
        "bProcessing": true,
        "sServerMethod": "POST",
        "sAjaxSource": DATATABLE_cnt + '?uri_str=' + URI_STR,
        /*"fnServerParams": function ( aoData ) {
            //console.log(aoData);
            //aoData.push( { "name": "more_data", "value": "my_value" } );
        },*/

        "fnDrawCallback": function( oSettings ) {
            // initialize js functions
            docReady();
        },
        "aoColumns": DATATABLE_aoColumns,
        //------------------------------------------------------------------------
        //------------------------------------------------------------------------
        //------------------------------------------------------------------------
        //------------------------------------------------------------------------

    } // oDefault_dataTables ends

    // initializing
    var oST = $.extend(true, {}, oDefault_dataTables);
    // datatable
    var oTable = $('.datatable').dataTable(oST);

    /////////////////////////////////////////////////////////////////////
    // dataTables default values / settings ends }
    /////////////////////////////////////////////////////////////////////


});

对于第二个过滤器

oTable.dataTableExt.afnFiltering.push(
          function( oSettings, aData, iDataIndex ) {
             var listingcity = document.getElementById('cityorzip').value;
            // push({"name":"cityorzip", "value":$('input.cityorzip').val() });
            //alert("test"+listingcity);
          }
       );
       ///aoData.push({"name":"cityorzip", "value":$('input.cityorzip').val() });
       $('#cityorzip').keyup(
            function() { oTable.fnDraw();
                //push("{'name':'cityorzip'",+ "'value':$('input.cityorzip').val() }")
            } 
        );

0 个答案:

没有答案