Question

我正在使用数据表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;
        }

Answer 1

我做了以下操作，相对放置标签和输入：这将成功，至少在我尝试过的决议中。

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

updated fiddle

Answer 2

您应该使用sDom option来成本化表DOM定位。

默认值：lfrtip（当bJQueryUI为false时）或＆lt;“H”lfr＆gt; t＆lt;“F”ip＆gt; （当bJQueryUI为真时）

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

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

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

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

标签应位于datatable插件中文本框的右侧

2 个答案: