標籤應該出現在數據表插件的文本框的右側

-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

標籤應該出現在數據表插件的文本框的右側

回答

相關問題