标签应该出现在数据表插件的文本框的右侧

-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; 
     }

来源

2013-04-04 user2045025

如果您确实需要帮助，只需将jsfiddle中的代码发布到绝对需要的地方来模拟问题。此外，使用JavaScript框的JavaScript。删除所有的PHP，因为它不会工作 – 2013-04-04 18:15:38

但如果我把我的js在js面板它不工作.... – user2045025 2013-04-04 18:34:58

只是阅读“我的相关代码从行** 2121 **开始”使大多数人回去.. – vals 2013-04-04 18:37:31

我的代码我做了如下，以放置标签和输入比较：这将这样的伎俩，至少决议，我试过。

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

updated fiddle

来源

2013-04-04 19:07:08 vals

您应该使用sDom option到costumize表DOM定位。

默认值：lfrtip（当bJQueryUI是假的），或者< “H” LFR>牛逼< “F” IP>（当bJQueryUI为true）

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

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

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

其余的就像其他的说。

来源

2013-04-04 19:18:11 kayz1

感谢您的回复......您能否在我的小提琴中更新 – user2045025 2013-04-04 19:31:29

标签应该出现在数据表插件的文本框的右侧

回答

相关问题