ฉันจะลบแถบค้นหาและส่วนท้ายที่เพิ่มโดยปลั๊กอิน jQuery DataTables ได้อย่างไร

ฉันใช้ jQuery DataTables

ฉันต้องการลบแถบค้นหาและท้ายกระดาษ (แสดงจำนวนแถวที่มองเห็นได้) ที่ถูกเพิ่มลงในตารางตามค่าเริ่มต้น ฉันแค่ต้องการใช้ปลั๊กอินนี้เพื่อเรียงลำดับโดยทั่วไป สามารถทำได้หรือไม่

สำหรับDataTables> = 1.10ให้ใช้:

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

สำหรับDataTables <1.10ให้ใช้:

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

หรือใช้ CSS บริสุทธิ์:

.dataTables_filter, .dataTables_info { display: none; }

ลองดูhttp://www.datatables.net/examples/basic_init/filter_only.htmlเพื่อดูรายการคุณสมบัติที่จะแสดง / ซ่อน

สิ่งที่คุณต้องการคือการตั้งค่า "bFilter" และ "bInfo" เป็นเท็จ

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

นอกจากนี้คุณยังไม่สามารถวาดหัวกระดาษหรือท้ายกระดาษได้ด้วยการตั้งค่าsDom: http://datatables.net/usage/options#sDom

'sDom': 't' 

จะแสดงเพียงตารางไม่มีส่วนหัวหรือส่วนท้ายหรืออะไร

มีการกล่าวถึงที่นี่: http://www.datatables.net/forums/discussion/2722/how-to-hide-empty-header-and-footer/p1

หากคุณใช้ตัวกรองที่กำหนดเองคุณอาจต้องการซ่อนช่องค้นหา แต่ยังต้องการเปิดใช้งานฟังก์ชั่นตัวกรองดังนั้นจึงbFilter: falseไม่ใช่วิธี ใช้แทนค่าเริ่มต้นคือdom: 'lrtp' 'lfrtip'เอกสารประกอบ: https://datatables.net/reference/option/dom

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

วิธีที่รวดเร็วและสกปรกคือการหาคลาสของส่วนท้ายและซ่อนไว้โดยใช้ jQuery หรือ CSS:

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

หากคุณกำลังใช้ themeroller:

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

ดังที่ได้กล่าวโดย @Scott Stafford sDOMเป็นสถานที่ให้บริการที่ดีที่สุดในการแสดงซ่อนหรือย้ายองค์ประกอบที่เขียน DataTables ฉันคิดว่าsDOMมันล้าสมัยไปแล้วด้วยการปะแก้ที่แท้จริงของสถานที่นี้ในขณะนี้domล้าสมัยตอนนี้กับแพทช์ที่เกิดขึ้นจริงแห่งนี้อยู่ในขณะนี้

คุณสมบัตินี้อนุญาตให้ตั้งค่าคลาสหรือ id ให้กับองค์ประกอบด้วยดังนั้นคุณจึงสามารถมีสไตล์ได้ง่ายขึ้น

ตรวจสอบเอกสารประกอบที่นี่: https://datatables.net/reference/option/dom

ตัวอย่างนี้จะแสดงเฉพาะตาราง:

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

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

ในตัวสร้าง DataTable ของคุณ

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

ที่นี่คุณสามารถเพิ่มsDomองค์ประกอบให้กับรหัสของคุณแถบการค้นหายอดนิยมจะถูกซ่อน

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

สิ่งนี้สามารถทำได้โดยเพียงแค่เปลี่ยนการกำหนดค่า:

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

แต่เพื่อซ่อนส่วนท้ายที่ว่างเปล่า; โค้ดส่วนนี้ทำเคล็ดลับ:

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

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

});

เพียงเตือนความจำคุณไม่สามารถเริ่มต้นDataTableใน<table>องค์ประกอบเดียวกันสองครั้ง

หากคุณพบปัญหาเดียวกันคุณสามารถตั้งค่าsearchingและpagingเท็จในขณะเริ่มต้น DataTable บน HTML ของคุณ<table>เช่นนี้

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

คุณสามารถซ่อนพวกเขาผ่าน css:

#example_info, #example_filter{display: none}

คุณสามารถใช้คุณสมบัติ sDom โค้ดมีลักษณะเช่นนี้

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

ไม่ซ่อนกล่องค้นหาและเพจเจอร์

ในขณะที่ DataTables 1.10.5 ตอนนี้เป็นไปได้ที่จะกำหนดตัวเลือกการเริ่มต้นโดยใช้แอตทริบิวต์ HTML5 data- *

- เอกสาร dataTables: คุณลักษณะข้อมูล HTML5 - ตัวเลือกตาราง

ดังนั้นคุณสามารถระบุใน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/https://jsfiddle.net/jhfrench/17v94f2s/

ข้อดีของวิธีนี้คือช่วยให้คุณสามารถเรียก dataTables มาตรฐาน (เช่น$('table.apply_dataTables').DataTable()) ในขณะที่สามารถกำหนดค่าตัวเลือก dataTables แบบตารางต่อตาราง

ฉันได้ทำเช่นนี้โดยกำหนด id ท้ายกระดาษแล้วจัดแต่งทรงผมโดยใช้ CSS:

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

จากนั้นจัดแต่งทรงผมโดยใช้ CSS:

#FooterHidden{
   display: none;
}

วิธีการดังกล่าวไม่ได้ผลสำหรับฉัน

ฉันคิดว่าวิธีที่ง่ายที่สุดคือ:

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

คุณสามารถแก้ไขเฉพาะตารางที่คุณต้องแก้ไขโดยไม่ต้องเปลี่ยน CSS หรือ JS ทั่วไป

หากคุณต้องการซ่อนแบบฟอร์มการค้นหาเท่านั้นเนื่องจากคุณมีตัวกรองอินพุตคอลัมน์หรืออาจเป็นเพราะคุณมีแบบฟอร์มการค้นหา CMS ที่สามารถส่งคืนผลลัพธ์จากตารางได้สิ่งที่คุณต้องทำคือตรวจสอบแบบฟอร์มและรับ id - (ในขณะที่เขียนนี้มันก็ดูเหมือนว่า[tableid]-table_filter.dataTables_filter) จากนั้นทำการ[tableid]-table_filter.dataTables_filter{display:none;}รักษาคุณสมบัติอื่น ๆ ทั้งหมดของ DataTables