DataTable: ซ่อนรายการแบบเลื่อนลง Show Entries แต่เก็บช่อง Search ไว้

เป็นไปได้ไหมที่จะซ่อนรายการแบบเลื่อนลงแสดงรายการ แต่เก็บช่องค้นหาไว้ใน DataTable ฉันต้องการแสดง 10 แถวโดยมีการแบ่งหน้าที่ด้านล่างพร้อมกับช่องค้นหาเสมอ แต่ไม่ต้องการแสดงรายการแบบเลื่อนลงแสดงรายการ

คุณสามารถค้นหาข้อมูลเพิ่มเติมได้โดยตรงที่ลิงค์นี้: http://datatables.net/examples/basic_init/filter_only.html

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

หวังว่าจะช่วยได้!

แก้ไข: หากคุณขี้เกียจ "bLengthChange": false คือสิ่งที่คุณต้องเปลี่ยน :)

หากใช้ Datatable> 1.1.0 lengthChangeตัวเลือกคือสิ่งที่คุณต้องการดังต่อไปนี้:

$('#example').dataTable( {
  "lengthChange": false
});

"searching": false,   // Search Box will Be Disabled

"ordering": false,    // Ordering (Sorting on Each Column)will Be Disabled

"info": true,         // Will show "1 to n of n entries" Text at bottom

"lengthChange": false // Will Disabled Record number per page

นี่คือคำตอบที่สำคัญสำหรับโพสต์นี้"bLengthChange": false,จะซ่อนรายการแบบเลื่อนลง

สำหรับ DataTables <= 1.9 คำตอบของ@perpo

$('#example').dataTable({
    "bLengthChange": false
});

ใช้งานได้ดี แต่สำหรับ 1.10+ ให้ลองทำดังนี้:

$('#example').dataTable({
    "dom": 'ftipr'
}); 

ที่เราได้ละเว้นl"การควบคุมอินพุตการเปลี่ยนความยาว"

1.9 เอกสาร

1.10 เอกสาร

ก็แก้แบบนั้น ใช้ bootstrap 4

    $(document).ready(function () {
        $('#table').DataTable({
            "searching": false,
            "paging": false,
            "info": false
        });
    });

cdn js:

• https://code.jquery.com/jquery-3.3.1.min.js
• https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js
• https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js
• https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js

cdn css:

• https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css
• https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css

sDom: "Tfrtip" หรือโทรกลับ:

"fnHeaderCallback": function(){
    $('#YOURTABLENAME-table_length').hide();
}

หากต้องการปิดใช้งานป้ายกำกับ "แสดงรายการ" ให้เพิ่มรหัส dom: 'Bfrtip' หรือคุณสามารถเพิ่ม "bInfo": false

$('#example').DataTable({
    dom: 'Bfrtip'
})

คุณสามารถลองสิ่งนี้ได้เช่นกัน

เพียงแค่ซ่อนมันจาก CSS โดยใช้

 .dataTables_length {
        display: none;
    }

ทั้งสองอย่างจะได้ผล

แค่เขียน :

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

หากต้องการซ่อน "แสดงรายการ" แต่ยังคงมีการแบ่งหน้า ฉันใช้รหัสด้านล่างและใช้งานได้

"bPaginate": true,
"bLengthChange": false,
"bFilter": true,
"bInfo": false,
"bAutoWidth": false

เพิ่มตัวเลือกนี้:

"bInfo": false

หากต้องการปิดใช้งานป้ายกำกับ "แสดงรายการ" ให้ใช้ "bInfo" ตัวอย่างเช่น "bFilter" เป็นองค์ประกอบการค้นหา แต่จะทำงานโดยค่าเริ่มต้น

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

เปิดหรือปิดการแสดงข้อมูลตาราง ข้อมูลนี้แสดงข้อมูลเกี่ยวกับข้อมูลที่มองเห็นได้ในขณะนี้บนเพจรวมถึงข้อมูลเกี่ยวกับข้อมูลที่ถูกกรองหากมีการดำเนินการนั้น