-1

我正在使用数据表 jquery 插件...在那个搜索框中出现...现在我的标签在左侧，搜索框在右侧...如何移动左侧的搜索文本框和右侧的标签侧面......我已经把我的代码放在小提琴中......如果我将js插件单独放在JS面板中它不起作用......所以我将代码组合并放在一个面板中......

http://jsfiddle.net/bz2C4/37/

我的相关代码从第 2121 行开始

#moveLabel {
    border: 1px solid black;
}
.dataTables_filter label {
    border: 1px solid red;
    background: lemonchiffon;
}
.dataTables_filter {
    position: static;
    text-align: center;
}

在下面提供我的代码

/**
         * Generate the node required for filtering text
         *  @returns {node} Filter control element
         *  @param {object} oSettings dataTables settings object
         *  @memberof DataTable#oApi
         */
        function _fnFeatureHtmlFilter ( oSettings )
        {
            var oPreviousSearch = oSettings.oPreviousSearch;

            var sSearchStr = oSettings.oLanguage.sSearch;
            sSearchStr = (sSearchStr.indexOf('_INPUT_') !== -1) ?
              sSearchStr.replace('_INPUT_', '<input type="text" />') :
              sSearchStr==="" ? '<input type="text" />' : sSearchStr+' <input type="text" />';

            var nFilter = document.createElement( 'div' );
            nFilter.className = oSettings.oClasses.sFilter;
            nFilter.innerHTML = '<label id="moveLabel">'+sSearchStr+'</label>';
            if ( !oSettings.aanFeatures.f )
            {
                nFilter.id = oSettings.sTableId+'_filter';
            }

            var jqFilter = $('input[type="text"]', nFilter);

            // Store a reference to the input element, so other input elements could be
            // added to the filter wrapper if needed (submit button for example)
            nFilter._DT_Input = jqFilter[0];

            jqFilter.val( oPreviousSearch.sSearch.replace('"','&quot;') );
            jqFilter.bind( 'keyup.DT', function(e) {
                /* Update all other filter input elements for the new display */
                var n = oSettings.aanFeatures.f;
                var val = this.value==="" ? "" : this.value; // mental IE8 fix :-(

                for ( var i=0, iLen=n.length ; i<iLen ; i++ )
                {
                    if ( n[i] != $(this).parents('div.dataTables_filter')[0] )
                    {
                        $(n[i]._DT_Input).val( val );
                    }
                }

                /* Now do the filter */
                if ( val != oPreviousSearch.sSearch )
                {
                    _fnFilterComplete( oSettings, { 
                        "sSearch": val, 
                        "bRegex": oPreviousSearch.bRegex,
                        "bSmart": oPreviousSearch.bSmart ,
                        "bCaseInsensitive": oPreviousSearch.bCaseInsensitive 
                    } );
                }
            } );

            jqFilter
                .attr('aria-controls', oSettings.sTableId)
                .bind( 'keypress.DT', function(e) {
                    /* Prevent form submission */
                    if ( e.keyCode == 13 )
                    {
                        return false;
                    }
                }
            );

            return nFilter;
        }
4

2 回答 2

1

您应该使用sDom 选项来定制表 DOM 定位。

默认值：lfrtip（当 bJQueryUI 为假时）或 <"H"lfr>t<"F"ip>（当 bJQueryUI 为真时）

$(document).ready( function() {
  $('#example').dataTable( {
    "sDom": 'flrtip'
  } );
} );

您可以像这样添加新的 div 元素和类：

$('#example').dataTable( {
        "sDom": '<"top"i><"title">lt<"bottom"pf>'
} );

其余的就像其他人所说的那样。

于 2013-04-04T19:18:11.910 回答
1

我做了以下操作，以相对放置标签和输入：这将起到作用，至少在我尝试过的分辨率中。

#moveLabel {
    border: 1px solid black;
    position: relative;
    left: 70px;
}
#moveLabel > input {
    position: relative;
    left: -280px;
}

更新的小提琴

于 2013-04-04T19:07:08.733 回答