আমি কীভাবে jQuery DataTables প্লাগইন দ্বারা যুক্ত অনুসন্ধান বার এবং পাদচরণ সরিয়ে ফেলতে পারি?

Question

আমি jQuery ডেটা টেবিল ব্যবহার করছি ।

আমি সারণীটিতে ডিফল্টরূপে যুক্ত হওয়া সন্ধান বার এবং পাদচরণ (সেখানে কতগুলি সারি দৃশ্যমান রয়েছে তা সরাতে চাই)। আমি কেবল এই প্লাগইনটি মূলত বাছাইয়ের জন্য ব্যবহার করতে চাই। এই কাজ করা যাবে?

Comments

আপনি দক্ষতার সঙ্গে ব্যবহার করতে পারে sDomযেমন এখানে বর্ণিত - stackoverflow.com/a/53885264/5729813

— তুষার Walzade

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

@ অ্যানপাও মন্তব্যটি যতটা ভাল, এবং বেশিরভাগ ক্ষেত্রে এটি কাজ করে বলে মনে হচ্ছে, প্রতিটি কলামের জন্য যদি ফিল্টারিং চলছে তবে এটি কাজ করে না, উদাহরণস্বরূপ: ডেটাবেবলস . net / রিলিজ- ডেটাটেবলস / এক্সট্রাস / ফিক্সড কলামগুলি / । সচেতন থাকা!

— জ্যানিস পিসেনিকস

@JanisPeisenieks URL এর উদাহরণ দেওয়া নষ্ট হয়ে গেছে: datatables.net/extensions/fixedcolumns

— antpaw

কেন এটি গ্রহণ করা হয়েছে তা আমি বুঝতে পারি না, কারণ এটি প্রশ্নের উত্তর দেয় না। সমস্যাটি অনুসন্ধান বার এবং পাদচরণ অপসারণ করছিল, পুরোপুরি অনুসন্ধান অক্ষম করে না।

— ব্যবহারকারী 1563544

সম্পূর্ণরূপে পাদলেখ সরাতে আপনাকে সেট করতে হবে paging:falseএবং info:falseকেবলpaging:false

— মাইক ডি 3 ভিআইডি টাইসন

@ ইউজার 1563544 এর মন্তব্যে যোগ করা, সন্ধানের বারটি গোপন করার এবং কার্যকারিতা অক্ষম করার কোনও উপায় কি আছে? (সিএসএস কৌশল ছাড়া অন্য?)

— vignz.pie

Answer 2

বৈশিষ্ট্যগুলির তালিকা / লুকানোর জন্য http://www.datatables.net/example/basic_init/filter_only.html দেখুন ।

আপনি যা চান তা হ'ল "bFilter" এবং "bInfo" কে মিথ্যা হিসাবে সেট করা;

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

Comments

@ এরিক আপনার জন্য এটির জন্য কাজ করার জন্য আপনাকে ধন্যবাদ জানায়, তবে আমি কেবল "বিপিগিনেট" দেখাতে চাই, আমি "বিআইএনফো" = মিথ্যা ও "বিপিগিনেট" = সত্য করলে উভয়ই দেখিয়ে দিচ্ছি তবে আমি কীভাবে প্রয়োগ করতে পারি "বেনফো" দেখাতে চাই না

— amit

{paging: false, info: false}

— ডেটা টেবিলগুলির

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

এটি এন্টপা'র উত্তরে যুক্ত করা উচিত। এটি "bFilter" পাস করার পরে এখনও বাকী ফিল্টার এবং তথ্য স্থানধারক ডিভগুলি স্পষ্টভাবে লুকায়: মিথ্যা, "বিআইএনফো": মিথ্যা।

— tibc-dev

এটি পাদলেখের পৃষ্ঠাগুলি সরিয়ে দেয়। আমি এটি একটি ভাল অনুশীলন মনে করি না।

— অনিরুদ

একে এখন 'ডোম' বলা হয় এবং আপনি এই বিকল্পের সাহায্যে আরও অনেকগুলি নিয়ন্ত্রণ করতে পারেন। ডেটাবেবলস

— রেফারেন্স /

এটি আসলে সঠিক উত্তর। সিএসএস এবং জেএস টুইটগুলি জড়িত অন্যান্য উত্তরগুলি হ্যাক। আপনি যদি ডেটা টেবিলগুলি সঠিকভাবে ব্যবহার করতে চান তবে আপনি এটি এটি করেন। উদাহরণস্বরূপ, যদি আপনি সার্চ বক্সে ছাড়া সমস্ত বিট এবং টুকরা (পেজিং, পৃষ্ঠা দৈর্ঘ্যের ইত্যাদি) দেখাতে চান, আপনি একটি যোগ হবে domসম্পত্তির একটি মান সঙ্গে ltiprদেখুন datatables.net/reference/option/dom

— onefootswill

Answer 4

আপনি যদি কাস্টম ফিল্টার ব্যবহার করছেন তবে আপনি অনুসন্ধান বাক্সটি আড়াল করতে চাইতে পারেন তবে তবুও ফিল্টারটির কার্যকারিতা সক্ষম করতে চান, তবে bFilter: falseএটি উপায় নয়। dom: 'lrtp'পরিবর্তে ব্যবহার করুন, ডিফল্ট হয় 'lfrtip'। ডকুমেন্টেশন: https://datatables.net/references/option/dom

Answer 5

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

Answer 6

একটি তাত্পর্যপূর্ণ ও নোংরা উপায় হল পাদলেখের শ্রেণীর সন্ধান করা এবং jQuery বা CSS ব্যবহার করে এটি আড়াল করা:

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

Answer 7

আপনি যদি থার্মোলার ব্যবহার করছেন:

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

Comments

+1 ধন্যবাদ, এটি আমাকে সঠিক দিকে নির্দেশ করেছে। আমি শিরোনামটিও আড়াল করতে চাইনি তাই আমি কেবল পাদচরণটি চেয়েছিলাম। ইউআই-কর্নার-ব্ল এবং ইউআই-কর্নার-বিআর ক্লাস কেবলমাত্র পাদলেখায় প্রয়োগ করা হয় তাই আমি ফুটারের মোড়ক পেতে একটি ব্যবহার করেছি ........ $ ("। ui-কোণ-bl")। লুকান ( );

— কেভ্বো

Answer 8

@ স্কট স্টাফর্ডের হিসাবে যেমনটি বলা হয়েছে যে ডেটা sDOMটেবিলগুলি রচনা করে এমন উপাদানগুলি প্রদর্শন, আড়াল বা স্থানান্তর করার জন্য সবচেয়ে অ্যাপ্রোপিয়েটেড সম্পত্তি। আমি মনে করি sDOMপ্রকৃত প্যাচ সহ এখন এই সম্পত্তিটি এখন পুরানো dom।

এই বৈশিষ্ট্যটি কোনও উপাদানকেও কিছু শ্রেণি বা আইডি সেট করতে দেয়, যাতে আপনি আরও সহজ স্টাইলিশ করতে পারেন।

থিসিকাল ডকুমেন্টেশন এখানে দেখুন: https://datatables.net/references/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 এ এভাবে ডেটা টেবিল শুরু করার সময় সেট searchingএবং pagingমিথ্যা করতে পারেন<table>

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

Answer 13

আপনি এগুলি CSS এর মাধ্যমে লুকিয়ে রাখতে পারেন:

#example_info, #example_filter{display: none}

Comments

'ভুল' নয়, নিছক আলাদা। এটি আপনি সমস্ত দৃষ্টিকোণ (আপনার উত্তর হিসাবে ক্লাস অনুসারে) গোপন করতে চান কিনা বা কোনও নির্দিষ্ট উদাহরণ (আইডি দ্বারা, খনি হিসাবে) লুকিয়ে রাখতে চান তা নির্ভর করে।

— গ্রাফিকডাইভাইন

Answer 14

আপনি sDom অ্যাট্রিবিউট ব্যবহার করতে পারেন। কোডটি এরকম কিছু দেখাচ্ছে।

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

এটি অনুসন্ধান এবং পেজার বাক্সটি লুকায়।

Answer 15

ডেটা টেবিল ১.১০.৫ অনুসারে এখন HTML5 ডেটা- * অ্যাট্রিবিউট ব্যবহার করে আরম্ভের বিকল্পগুলি সংজ্ঞা দেওয়া সম্ভব ine

- ডেটা টেবিল ডকুমেন্টেশন: এইচটিএমএল 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/jhfunch/17v94f2s/ এ একটি কার্যকারী উদাহরণ দেখুন ।

এই পদ্ধতির সুবিধাটি হ'ল এটি আপনাকে ডাটাবেস $('table.apply_dataTables').DataTable()টেবিল-টেবিল বিকল্পগুলি বিকল্প কনফিগার করতে সক্ষম হওয়ার সময় একটি স্ট্যান্ডার্ড ডেটাবেটস কল (যেমন, ) করতে দেয়।

Answer 16

আমি ফুটার আইডি নির্ধারণ করে এবং তারপর 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;
}

উপরে উল্লিখিত উপায়গুলি আমার পক্ষে কাজ করছে না।

Answer 17

আমি মনে করি সহজ উপায় হ'ল:

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

সাধারণ সিএসএস বা জেএস পরিবর্তন না করে আপনি কেবল যে টেবিলটি সংশোধন করতে হবে তা সম্পাদনা করতে পারবেন।

Answer 18

আপনি যদি কেবল অনুসন্ধানের ফর্মটি গোপন করতে চান উদাহরণস্বরূপ আপনার কাছে কলাম ইনপুট ফিল্টার রয়েছে বা এটি হতে পারে যে আপনি ইতিমধ্যে কোনও সিএমএস অনুসন্ধান ফর্মটি টেবিল থেকে ফলাফলগুলি ফিরিয়ে দিতে সক্ষম হয়েছেন তবে আপনাকে যা করতে হবে তা ফর্মটি পরীক্ষা করে তার আইডি পেতে হবে - (এটি লেখার সময়, এটি দেখতে এরকম দেখাচ্ছে [tableid]-table_filter.dataTables_filter)। তারপরে কেবল [tableid]-table_filter.dataTables_filter{display:none;}ডেটাটেবলের সমস্ত অন্যান্য বৈশিষ্ট্য বজায় রাখা করবেন।