मैं jQuery DataTables प्लगइन द्वारा जोड़े गए खोज बार और पाद को कैसे हटा सकता हूं?

Question

मैं jQuery DataTables का उपयोग कर रहा हूं ।

मैं खोज बार और पाद को हटाना चाहता हूं (यह दिखाते हुए कि वहां कितनी पंक्तियां हैं) जो डिफ़ॉल्ट रूप से तालिका में जोड़ी गई हैं। मैं मूल रूप से सॉर्टिंग के लिए इस प्लगइन का उपयोग करना चाहता हूं। क्या यह किया जा सकता है?

Comments

आप sDomयहाँ वर्णित के रूप में कुशलता से उपयोग कर सकते हैं - stackoverflow.com/a/53885264/5729813

— तुषार वालजेड

Answer 1

के लिए DataTables> = 1.10 , उपयोग करें:

$('table').dataTable({searching: false, paging: false, info: false});

के लिए DataTables <1.10 , उपयोग करें:

$('table').dataTable({bFilter: false, bInfo: false});

या शुद्ध सीएसएस का उपयोग कर:

.dataTables_filter, .dataTables_info { display: none; }

Comments

जैसा कि @antpaw टिप्पणी के रूप में अच्छा है, और ज्यादातर मामलों में काम करने लगता है, यह काम नहीं करता है अगर प्रत्येक कॉलम के लिए फ़िल्टरिंग चल रही है, जैसे कि इस उदाहरण में: datatables.net/release-datatables/extras/Fixedolumns/… । जागरूक रहें!

— Janis Peisenieks

@JanisPeisenieks उदाहरण URL टूट गया है: datatables.net/extensions/fixedcolumns

— antpaw

मुझे समझ नहीं आता कि यह क्यों स्वीकार किया जाता है, क्योंकि यह सवाल का जवाब नहीं देता है। समस्या खोज बार और पाद को हटा रही थी, पूरी तरह से खोज को अक्षम नहीं कर रही थी।

— user1563544

फुटर को पूरी तरह से हटाने के लिए आपको सेट करना होगा paging:falseऔर info:false, न कि सिर्फpaging:false

— माइक डी 3 आई डी टायसन जूल

@ user1563544 की टिप्पणी में, क्या केवल सर्च बार को छिपाने और कार्यक्षमता को अक्षम करने का कोई तरीका नहीं है? (सीएसएस ट्रिक्स के अलावा?)

— vignz.pie 10

Answer 2

दिखाने / छिपाने के लिए सुविधाओं की सूची के लिए http://www.datatables.net/examples/basic_init/filter_only.html देखें ।

आप जो चाहते हैं वह "bFilter" और "bInfo" को असत्य पर सेट करना है;

$(document).ready(function() {
    $('#example').dataTable( {
        "bPaginate": false,
        "bFilter": false,
        "bInfo": false
                 } );
} );

Comments

@ मेरे लिए काम करने के लिए धन्यवाद

— अमित

DataTables के नवीनतम संस्करण में सिर्फ{paging: false, info: false}

— josemmo

Answer 3

आप सेटिंग करके हेडर या फुटर भी नहीं खींच सकते हैं sDom: http://datatables.net/usage/options#sDom

'sDom': 't' 

तालिका को प्रदर्शित करेगा, कोई हेडर या फुटर या कुछ भी नहीं।

इसकी कुछ चर्चा यहां की गई है: http://www.datatables.net/forums/discussion/2722/how-to-hide-empty-header-and-footer/p1

Comments

इसे एंटीपाव के जवाब में जोड़ा जाना चाहिए। यह स्नेहपूर्वक फिल्टर और जानकारी को छिपाता है प्लेसहोल्डर divs अभी भी शेष है जब "bFilter" पास कर रहा है: गलत, "bInfo": गलत।

— tibc-dev

इससे पाद में शिथिलता दूर होती है। मुझे नहीं लगता कि यह एक अच्छा अभ्यास है।

— अनिरुद्ध

अब इसे 'डोम' कहा जाता है और आप इस विकल्प के साथ बहुत अधिक नियंत्रण कर सकते हैं। देखें datatables.net/reference/option/dom

— unkreativ

यह वास्तव में सही उत्तर है। Css और js tweaks से जुड़े अन्य उत्तर सभी हैक हैं। यदि आप DataTables का सही उपयोग करना चाहते हैं, तो आप ऐसा करते हैं। एक उदाहरण के रूप में, यदि आप खोज बॉक्स को छोड़कर सभी बिट्स और टुकड़े (पेजिंग, पृष्ठ-लंबाई आदि) दिखाना चाहते हैं, तो आप एक domसंपत्ति जोड़कर ltiprदेखेंगे datatables.net

— reference

Answer 4

यदि आप कस्टम फ़िल्टर का उपयोग कर रहे हैं, तो आप खोज बॉक्स को छुपाना चाह सकते हैं लेकिन फिर भी फ़िल्टर फ़ंक्शन को सक्षम करना चाहते हैं, इसलिए bFilter: falseऐसा नहीं है। dom: 'lrtp'इसके बजाय का उपयोग करें , डिफ़ॉल्ट है 'lfrtip'। प्रलेखन: https://datatables.net/reference/option/dom

Answer 5

var table = $("#datatable").DataTable({
   "paging": false,
   "ordering": false,
   "searching": false
});

Answer 6

एक त्वरित और गंदा तरीका पाद लेख की कक्षा का पता लगाना और इसे jQuery या CSS का उपयोग करके छिपाना है:

$(".dataTables_info").hide();

Answer 7

यदि आप उपयोग कर रहे हैं themeroller:

.dataTables_wrapper .fg-toolbar { display: none; }

Comments

+1 धन्यवाद, इसने मुझे सही दिशा में इशारा किया। मैं शीर्ष लेख के रूप में अच्छी तरह से छिपाने के लिए चाहता था तो मैं सिर्फ पाद लेख चाहता था। ui-corner-bl और ui-कोने-br वर्ग केवल पाद लेख पर लागू होते हैं, इसलिए मैंने पाद लेख को पाने के लिए या तो एक का उपयोग किया ........ $ ("। ui-corner-bl") छिपाएँ। );

— केव्बो

Answer 8

जैसा कि @Scott स्टैफोर्ड ने कहा है कि डेटाटेबल्स sDOMको बनाने वाले तत्वों को दिखाने, छिपाने या स्थानांतरित करने के लिए सबसे अधिक अप्रॉपेटेड संपत्ति है। मुझे लगता है sDOMकि अब यह पुराना हो गया है, वास्तविक पैच के साथ यह संपत्ति अब हैdom ।

यह संपत्ति कुछ तत्व या आईडी को एक तत्व में भी सेट करने की अनुमति देती है, जिससे आप स्टाइलिश को आसान बना सकते हैं।

यहां पर इनलिश डॉक्यूमेंटेशन देखें देखें https://datatables.net/reference/option/dom

यह उदाहरण केवल तालिका दिखाएगा:

$('#myTable').DataTable({
    "dom": 't'
});

Answer 9

<script>
$(document).ready(function() {
    $('#nametable').DataTable({
        "bPaginate": false,
        "bFilter": false,
        "bInfo": false
    });
});
</script>

अपने डेटाटेबल कंस्ट्रक्टर में

https://datatables.net/forums/discussion/20006/how-to-remove-cross-icon-in-search-box

Comments

इस उत्तर का किसी भी डॉक्टर से कोई संबंध नहीं है, और आपने एक काम का जवाब नहीं दिया है

— इलाद चांदी

Answer 10

यहां आप sDomअपने कोड में तत्व जोड़ सकते हैं , शीर्ष खोज बार छिपा हुआ है।

$(document).ready(function() {
    $('#example').dataTable( {
"sDom": '<"top">rt<"bottom"flp><"clear">'
 } );
} );

Answer 11

यह केवल विन्यास को बदलकर किया जा सकता है:

$('table').dataTable({
      paging: false, 
      info: false
 });

लेकिन खाली पाद को छिपाने के लिए; कोड का यह टुकड़ा चाल करता है:

 $('table').dataTable({
      paging: false, 
      info: false,

      //add these config to remove empty header
      "bJQueryUI": true,
      "sDom": 'lfrtip'

});

Answer 12

बस एक अनुस्मारक आप एक DataTableही <table>तत्व पर दो बार आरंभ नहीं कर सकते ।

यदि आप एक ही मुद्दे का सामना करते हैं तो आप इस तरह से अपने HTML पर DataTable को इनेबल करते हुए सेट searchingऔर pagingगलत कर सकते हैं<table>

 $('#tbl').DataTable({
    searching: false, 
    paging: false,
    dom: 'Bfrtip',
    buttons: [
       'copy', 'csv', 'excel', 'pdf', 'print'
    ]
 });

Answer 13

आप उन्हें सीएसएस के माध्यम से छिपा सकते हैं:

#example_info, #example_filter{display: none}

Comments

'गलत' नहीं, केवल अलग। यह इस बात पर निर्भर करता है कि आप सभी उदाहरणों को छिपाना चाहते हैं (वर्ग के अनुसार, आपके उत्तर में), या एक विशेष उदाहरण (आईडी द्वारा, जैसा कि मेरा है)।

— ग्राफिकडिविन

Answer 14

आप sDom विशेषता का उपयोग कर सकते हैं। कोड कुछ इस तरह दिखता है।

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

खोज और पेजर बॉक्स को छुपाता नहीं है।

Answer 15

DataTables 1.10.5 के रूप में अब HTML5 डेटा- * विशेषताओं का उपयोग करके आरंभिक विकल्पों को परिभाषित करना संभव है।

- डेटाटेबल्स प्रलेखन: एचटीएमएल 5 डेटा- * विशेषताएँ - तालिका विकल्प

तो आप data-searching="false" data-paging="false" data-info="false"पर निर्दिष्ट कर सकते हैं table। उदाहरण के लिए, यह तालिका खोज को लागू करने, पेजिंग लागू करने या सूचना ब्लॉक दिखाने की अनुमति नहीं देगी:

<table id="example" class="display" width="100%" data-searching="false" data-paging="false" data-info="false">
    <thead>
        <tr>
            <th>Name</th>
            <th data-orderable="false">Avatar</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td><img src="https://www.gravatar.com/avatar/8edcff60cdcca2ad650758fa524d4990?s=64&amp;d=identicon&amp;r=PG" alt="" style="width: 64px; height: 64px; visibility: visible;"></td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td><img src="https://www.gravatar.com/avatar/98fe9834dcca2ad650758fa524d4990?s=64&amp;d=identicon&amp;r=PG" alt="" style="width: 64px; height: 64px; visibility: visible;"></td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
        ...[ETC]...
    </tbody>
</table>

देखें https://jsfiddle.net/jhfrench/17v94f2s/ पर एक काम उदाहरण ।

इस दृष्टिकोण का लाभ यह है कि यह आपको $('table.apply_dataTables').DataTable()डेटाटैब विकल्प तालिका-दर-तालिका कॉन्फ़िगर करने में सक्षम होने के साथ एक मानक डेटाटेबल्स कॉल (यानी ) करने की अनुमति देता है ।

Answer 16

मैंने पाद लेख को एक आईडी निर्दिष्ट करके और फिर सीएसएस का उपयोग करके स्टाइल किया है:

    <table border="1" class="dataTable" id="dataTable_${dtoItem.key}" >
     <thead>
        <tr>
            <th></th>

        </tr>
    </thead>
 <tfoot>
    <tr>
            <th id="FooterHidden"></th>
    </tr>
</tfoot>
<tbody>

    <tr>

                <td class="copyableField"></td>

    </tr>
 </tbody>
</table>

फिर स्टाइल सीएसएस का उपयोग कर:

#FooterHidden{
   display: none;
}

जैसा कि ऊपर वर्णित तरीके मेरे लिए काम नहीं कर रहे हैं।

Answer 17

मुझे लगता है कि सबसे सरल तरीका है:

<th data-searchable="false">Column</th>

आप सामान्य सीएसएस या जेएस को बदले बिना केवल उसी तालिका को संपादित कर सकते हैं जिसे आपको संशोधित करना है।

Answer 18

यदि आप केवल उदाहरण के लिए खोज फ़ॉर्म को छिपाना चाहते हैं क्योंकि आपके पास कॉलम इनपुट फ़िल्टर हैं या हो सकता है क्योंकि आपके पास पहले से ही एक CMS खोज फ़ॉर्म है जो तालिका से परिणाम वापस करने में सक्षम है तो आपको बस इतना करना होगा कि प्रपत्र का निरीक्षण करें और इसकी आईडी प्राप्त करें - (इसे लिखते समय ऐसा दिखता है [tableid]-table_filter.dataTables_filter)। तो बस [tableid]-table_filter.dataTables_filter{display:none;}डेटाटैबल्स की अन्य सभी विशेषताओं को बनाए रखना है।