JQuery ডেটা টেবিলগুলিতে একটি নির্দিষ্ট কলামের জন্য বাছাই অক্ষম করুন

156

আমি টেবিল ক্ষেত্রগুলি বাছাই করার জন্য jQuery ডেটাবেলস প্লাগইন ব্যবহার করছি । আমার প্রশ্ন: আমি কীভাবে একটি নির্দিষ্ট কলামের জন্য বাছাই অক্ষম করব? আমি নিম্নলিখিত কোড দিয়ে চেষ্টা করেছি, কিন্তু এটি কার্যকর হয়নি:

"aoColumns": [
  { "bSearchable": false },
  null
]

আমি নিম্নলিখিত কোডটি চেষ্টা করে দেখেছি:

"aoColumnDefs": [
  {
    "bSearchable": false,
    "aTargets": [ 1 ]
  }
]

তবে এটি এখনও পছন্দসই ফলাফল দেয়নি।

javascript  jquery  sorting  datatables 
— উসমান
সূত্র
1
আমি আমার উত্তর সম্পাদনা করেছি, এমন বিকল্পের সাথে যেখানে আপনি আপনার টিএইচ সংজ্ঞাতে অক্ষম কলাম সেট করতে পারেন।
— পাওলো ফিদালগো
সিএসএস ব্যবহার করে বোতামটি অক্ষম করুন। এই পৃষ্ঠাটি দেখুন। ডেটাবেবলস.ফর্মস
— ইউজিন জোসেফ
আপনার কাছে বিরুদ্ধে যুদ্ধ শেষ করতে cbabhusal.wordpress.com/2015/05/20/...
— বাজিকর

উত্তর:

176

এটি যা আপনি খুঁজছেন: 

$('#example').dataTable( {
      "aoColumnDefs": [
          { 'bSortable': false, 'aTargets': [ 1 ] }
       ]
});
— wildehahn
সূত্র
3
এটি আমার জন্য কাজ করেছে। আপনি যদি প্রথম কলামটি 'aTargets': [-1], দ্বিতীয় 'aTargets': [1], তৃতীয় 'aTargets': [2] এবং আরও জন্য বাছাই করতে চান।
— লাসাং
5
আপনি কেবল 'aTargets' করতে পারেন: [1, 2]
— Adrien হউন
2
@Lasang - আপনি সত্যিই বলছেন কি [-1], তারপর [1], [2], ইত্যাদি? কী -1মানে? 1ডেটা টেবিলগুলির জন্য কলামগুলির জন্য সূচীকরণ শুরু হয় না ?
— ড্যান নিসেনবাউম
1
-1সারণির শেষ থেকে সূচকের গণনা। ( -1টেবিলের শেষ কলামটি)
— রামি নসর
1
ডাটা টেবিল ১.১০.৫ অনুসারে এখন HTML5 ডেটা- * অ্যাট্রিবিউট ব্যবহার করে আরম্ভের বিকল্পগুলি সংজ্ঞা দেওয়া সম্ভব ine
— স্ট্যাকওভারফ্লো.
87

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

-from DataTables উদাহরণ - HTML5 এর data- * attribute - টেবিল অপশন

সুতরাং আপনি যে কলামটি বাছাই করতে চান না data-orderable="false"তার ব্যবহার করতে পারেন th। উদাহরণস্বরূপ, নীচের সারণীতে দ্বিতীয় কলাম "অবতার" বাছাইযোগ্য হবে না:

<table id="example" class="display" width="100%" data-page-length="25">
    <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/6yxvxt7L/ এ একটি কার্যকারী উদাহরণ দেখুন ।

— জেরোমি ফ্রেঞ্চ
সূত্র
9
আইএমও, এটি এখানে সেরা উত্তর, সহজ এবং সবচেয়ে মার্জিত পদ্ধতির
— হামান স্যামুয়েল
2
এটি বাছাই কার্যকারিতা অক্ষম করে, তবে আমি খুঁজে পেলাম (1.10.12 এ) যে কলামটি তখনও ডিফল্ট অনুসারে বাছাই করা হয় যখন ডেটা টেবিলটি আরম্ভ হয়, যা একটি ক্রমোন্নত সাজানো গ্লাইফ সহ কলামটি স্টাইল করে। আপনি যদি এটি না চান তবে আপনি এই জাতীয় বাছাই ছাড়াই ডেট্যাটেবল শুরু করতে পারেন: $ ('# উদাহরণ') Data ডেটা টেবিল ({'অর্ডার': []});
— ব্রায়ান মেরেল
@ ব্রায়ানমারেল ওয়েলেল্ল ... দেখুন! jsfiddle.net/ja0ty8xr আপনার সেই আচরণের জন্য একটি গিটহাব ইস্যু খোলা উচিত। :)
— জেরোমি ফ্রেঞ্চ
64

প্রথম কলামটি বাছাই নিষ্ক্রিয় করতে, ডেটাবেটস jquery এ নীচের কোড দিয়ে চেষ্টা করুন। নাল এখানে বাছাই সক্ষম সক্ষম করে।

$('#example').dataTable( {
  "aoColumns": [
  { "bSortable": false },
  null,
  null,
  null
  ]
} );

JQuery ডেটাবেবলগুলিতে একটি কলামে বাছাই অক্ষম করুন

— Paulraj
সূত্র
@ পোলরাজ লিংকটি নষ্ট হয়ে গেছে, আপনি কি এটি পরিবর্তন করতে চান?
— তৌফিক
1
ডাটা টেবিল ১.১০.৫ অনুসারে এখন HTML5 ডেটা- * অ্যাট্রিবিউট ব্যবহার করে আরম্ভের বিকল্পগুলি সংজ্ঞা দেওয়া সম্ভব ine
— স্ট্যাকওভারফ্লো.
60

ডেটাবেটস ব্যবহার করে 1.9.4 আমি এই কোডটি দিয়ে প্রথম কলামের জন্য বাছাই অক্ষম করেছি:

/* Table initialisation */
$(document).ready(function() {
    $('#rules').dataTable({
        "sDom" : "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
        "sPaginationType" : "bootstrap",
        "oLanguage" : {
            "sLengthMenu" : "_MENU_ records per page"
        },
        // Disable sorting on the first column
        "aoColumnDefs" : [ {
            'bSortable' : false,
            'aTargets' : [ 0 ]
        } ]
    });
});

সম্পাদনা করুন:

এমনকি আপনি no-sortক্লাস ব্যবহার করে অক্ষম করতে পারেন আপনার <th>,

এবং এই সূচনা কোডটি ব্যবহার করুন:

// Disable sorting on the no-sort class
"aoColumnDefs" : [ {
    "bSortable" : false,
    "aTargets" : [ "no-sort" ]
} ]

সম্পাদনা 2

এই উদাহরণে আমি পুরানো ব্লগ পোস্ট অনুসরণ করে বুটস্ট্র্যাপ সহ ডেটাবল ব্যবহার করছি। বুটস্ট্র্যাপের সাহায্যে ডেটাবেবল স্টাইলিং সম্পর্কে আপডেট সামগ্রীর সাথে একটি লিঙ্ক রয়েছে ।

— পাওলো ফিদালগো
সূত্র
@ এলারিলেম্পকো আমি আপডেট লিংক সহ পোস্ট আপডেট করেছি।
— পাওলো ফিদালগো
ধন্যবাদ .. আমরা বাছাইয়ের সময় সিএসএসের ক্ষতির বিষয়ে কী
— শঙ্কর পৌদেল
1
ডাটা টেবিল ১.১০.৫ অনুসারে এখন HTML5 ডেটা- * অ্যাট্রিবিউট ব্যবহার করে আরম্ভের বিকল্পগুলি সংজ্ঞা দেওয়া সম্ভব ine
— স্ট্যাকওভারফ্লো.
27

আমি যা ব্যবহার করি তা হ'ল অ্যাড টিডি তে একটি কাস্টম বৈশিষ্ট্য যুক্ত করুন এবং স্বয়ংক্রিয়ভাবে সেই অ্যাটর মানটি পরীক্ষা করে নিয়ন্ত্রণ বাছাই করুন।

তাই এইচটিএমএল কোডটি হবে

<table class="datatables" cellspacing="0px" >

    <thead>
        <tr>
            <td data-bSortable="true">Requirements</td>
            <td>Test Cases</td>
            <td data-bSortable="true">Automated</td>
            <td>Created On</td>
            <td>Automated Status</td>
            <td>Tags</td>
            <td>Action</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>

এবং ডেটাবেবলগুলি সূচনা করার জন্য জাভাস্ক্রিপ্টটি হবে (এটি গতিশীলভাবে টেবিল থেকে নিজেকে বাছাই করার তথ্যটি পুনরায় পাবেন;)

$('.datatables').each(function(){
    var bFilter = true;
    if($(this).hasClass('nofilter')){
        bFilter = false;
    }
    var columnSort = new Array; 
    $(this).find('thead tr td').each(function(){
        if($(this).attr('data-bSortable') == 'true') {
            columnSort.push({ "bSortable": true });
        } else {
            columnSort.push({ "bSortable": false });
        }
    });
    $(this).dataTable({
        "sPaginationType": "full_numbers",
        "bFilter": bFilter,
        "fnDrawCallback": function( oSettings ) {
        },
        "aoColumns": columnSort
    });
});
— ভাवेश বি
সূত্র
3
এর data-bSortableপরিবর্তে আপনার ব্যবহার করা উচিত bSortable। bSortableকোনও বৈধ HTML বৈশিষ্ট্য নয়।
— জেমস ডোনেলি
ডাটা টেবিল ১.১০.৫ অনুসারে এখন HTML5 ডেটা- * অ্যাট্রিবিউট ব্যবহার করে আরম্ভের বিকল্পগুলি সংজ্ঞা দেওয়া সম্ভব ine
— স্ট্যাকওভারফ্লো.
15

columnDefsএখন একটি ক্লাস গ্রহণ করে। আমি যদি বলি যে আপনি যদি নিজের মার্কআপে অক্ষম করার জন্য কলামগুলি নির্দিষ্ট করতে চান তবে এটি পছন্দসই পদ্ধতি:

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th class="datatable-nosort">Actions</th>
        </tr>
    </thead>
    ...
</table>

তারপরে, আপনার জেএসে:

$("table").DataTable({
    columnDefs: [{
        targets: "datatable-nosort",
        orderable: false
    }]
});
— dtbarne
সূত্র
10

অক্ষম হওয়ার জন্য নির্দিষ্ট কলামটি অক্ষম করতে আপনি যা ব্যবহার করতে পারেন তা এখানে:

 $('#tableId').dataTable({           
            "columns": [
                { "data": "id"},
                { "data": "sampleSortableColumn" },
                { "data": "otherSortableColumn" },
                { "data": "unsortableColumn", "orderable": false}
           ]
});

সুতরাং আপনাকে যা করতে হবে তা হ'ল "অর্ডারযোগ্য": কলামটি মিথ্যা যা আপনি বাছাই করতে চান না to

— কনস্ট্যান্টিন স্ট্যান
সূত্র
6 
$("#example").dataTable(
  {
    "aoColumnDefs": [{
      "bSortable": false, 
      "aTargets": [0, 1, 2, 3, 4, 5]
    }]
  }
);
— অভিনব
সূত্র
ভবেশের উত্তর চতুর, তবে ওভারকিল। বাছাই অক্ষম করতে কেবল অভিনব এর উত্তর ব্যবহার করুন। প্রথম কলামে বাছাই করা অক্ষম করা এও কলাম ডিফস বিকল্পে কলামের লক্ষ্য যুক্ত করুন:"bSortable": false, "aTargets": [0]
— ম্যাথু
5

একক কলাম বাছাইয়ের জন্য এই উদাহরণটি ব্যবহার করে দেখুন:

<script type="text/javascript">                         
    $(document).ready(function() 
    {
        $("#example").dataTable({
           "aoColumnDefs": [
              { 'bSortable': false, 'aTargets': [ 0 ] }
           ]
        });
    });                                         
</script>

একাধিক কলামের জন্য এই উদাহরণটি ব্যবহার করে দেখুন: আপনাকে কেবল কলাম নম্বর যুক্ত করতে হবে। ডিফল্টরূপে এটি 0 থেকে শুরু হয়

<script type="text/javascript">                         
    $(document).ready(function() 
    {
        $("#example").dataTable({
           "aoColumnDefs": [
              { 'bSortable': false, 'aTargets': [ 0,1,2,4,5,6] }
           ]
        });
    });                                         
</script>

এখানে শুধুমাত্র Column 3কাজ করে

— সিদ্ধার্থ unসুনুরি
সূত্র
5

1.10.5 হিসাবে , কেবল অন্তর্ভুক্ত করুন

'অনুগামী: মিথ্যা'

কলামডেফগুলিতে এবং সাথে আপনার কলামটি লক্ষ্যবস্তু করুন

'লক্ষ্যগুলি: [0,1]'

টেবিলে পছন্দ করা উচিত: 

var table = $('#data-tables').DataTable({
    columnDefs: [{
        targets: [0],
        orderable: false
    }]
});
— মার্কো বাজলোভিক
সূত্র
5

যদি আপনি FIRST কলামের orderableসম্পত্তিটিকে মিথ্যাতে সেট করে থাকেন তবে আপনাকে অবশ্যই ডিফল্ট orderকলাম সেট করতে হবে অন্যথায় এটি কাজ করবে না কারণ প্রথম কলামটি ডিফল্ট ক্রম কলাম হয়। নীচের উদাহরণগুলি প্রথম কলামে বাছাই অক্ষম করে কিন্তু দ্বিতীয় কলামটি ডিফল্ট অর্ডার কলাম হিসাবে সেট করে (মনে রাখে ডেটা টেবিলের সূচকগুলি শূন্য ভিত্তিতে থাকে)।

$('#example').dataTable( {
  "order": [[1, 'asc']],
  "columnDefs": [
    { "orderable": false, "targets": 0 }
  ]
} );
— মূসা মাছুয়া
সূত্র
এটিই উত্তর যা আমার পক্ষে জুলাই 17, 2020
— ব্রায়ান
3 
"aoColumnDefs" : [   
{
  'bSortable' : false,  
  'aTargets' : [ 0 ]
}]

এখানে 0কলামটির সূচি রয়েছে, আপনি যদি একাধিক কলামগুলি বাছাই না করতে চান তবে কলাম সূচকের মানগুলি পৃথক করে উল্লেখ করুনcomma(,)

— সংকেতপদ্ধতিরচয়িতা
সূত্র
সমস্ত কলামের জন্য বাছাই অক্ষম করা সম্ভব?
— ফিদেল কাস্ট্রো
হ্যাঁ এটা সম্ভব, আপনি কি জানেন এই লিঙ্কটি পরিদর্শন করতে পারেন cbabhusal.wordpress.com/2015/08/18/...
— বাজিকর
3

ভাবীশের উত্তর আপডেট করতে (যা আমি মনে করি যে ডেটা টেবিলগুলির পুরানো সংস্করণ এবং এটি আমার পক্ষে কাজ করে নি)। আমি মনে করি তারা গুণাবলীর নাম পরিবর্তন করেছে। এটা চেষ্টা কর:

<thead>
    <tr>
        <td data-sortable="false">Requirements</td>
        <td data-sortable="false">Automated</td>
        <td>Created On</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td>
— জোশ মৌচ
সূত্র
এটি একটি দুর্দান্ত পদ্ধতির মতো বলে মনে হচ্ছে ... যদি এটি কাজ করে তবে তা আমার পক্ষে হয় না। এটি কি নথিভুক্ত?
— AllInOne
1
@AllInOne: হ্যাঁ, জন্য data-orderable... দেখতে stackoverflow.com/a/32281113/1430996 । data-sortableএছাড়াও কাজ করে, তবে এটি কোথায় নথিভুক্ত হয়েছে তা আমি খুঁজে পাচ্ছি না।
— জেরোমি ফ্রেঞ্চ
আরও ভাল সমাধান
— ওয়াশিংটন মোরেইস
2

ক্লাস ব্যবহার:

<table  class="table table-datatable table-bordered" id="tableID">
    <thead>
        <tr>
            <th class="nosort"><input type="checkbox" id="checkAllreInvitation" /></th>
            <th class="sort-alpha">Employee name</th>
            <th class="sort-alpha">Send Date</th>
            <th class="sort-alpha">Sender</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" name="userUid[]" value="{user.uid}" id="checkAllreInvitation" class="checkItemre validate[required]" /></td>
            <td>Alexander Schwartz</td>
            <td>27.12.2015</td>
            <td>dummy@email.com</td>
        </tr>
    </tbody>
</table>
<script type="text/javascript">
    $(document).ready(function() {
        $('#tableID').DataTable({
            'iDisplayLength':100,
            "aaSorting": [[ 0, "asc" ]],
            'aoColumnDefs': [{
                'bSortable': false,
                'aTargets': ['nosort']
            }]
        });
    });
</script>

এখন আপনি <TH> কে "নসর্ট" ক্লাস দিতে পারেন

— ঘনশ্যাম গোহেল
সূত্র
1

আপনার যদি ইতিমধ্যে কিছু কলাম লুকানো থাকে তবে আমি শেষের নামটি কলামটি গোপন করি। আমাকে কেবল নাম, নামকরণ করতে হবে, সুতরাং আমি ক্যোয়ারী তৈরি করেছি তবে সেই কলামটি সামনের প্রান্ত থেকে লুকিয়ে রেখেছি। এ জাতীয় পরিস্থিতিতে বাছাই অক্ষম করার পরিবর্তনগুলি হ'ল:

    "aoColumnDefs": [
        { 'bSortable': false, 'aTargets': [ 3 ] },
        {
            "targets": [ 4 ],
            "visible": false,
            "searchable": true
        }
    ],

লক্ষ্য করুন যে এখানে আমার লুকানোর কার্যকারিতা ছিল

    "columnDefs": [
            {
                "targets": [ 4 ],
                "visible": false,
                "searchable": true
            }
        ],

তারপরে আমি এতে একীভূত হয়েছি "aoColumnDefs"

— প্রতীক
সূত্র
1

  1. প্রথম কলামে অর্ডারিং অক্ষম করতে নিম্নলিখিত কোডটি ব্যবহার করুন:

    $('#example').dataTable( {
  "columnDefs": [
    { "orderable": false, "targets": 0 }
  ]
} );

  2. ডিফল্ট ক্রম অক্ষম করতে, আপনি এটি ব্যবহার করতে পারেন:

    $('#example').dataTable( {
     "ordering": false, 
} );
— পুষ্করজ ভান্ডারী
সূত্র
1

আপনি কলামে .notsortable () পদ্ধতি ব্যবহার করতে পারেন নির্দেশিকা 

 vm.dtOpt_product = DTOptionsBuilder.newOptions()
                .withOption('responsive', true)
        vm.dtOpt_product.withPaginationType('full_numbers');
        vm.dtOpt_product.withColumnFilter({
            aoColumns: [{
                    type: 'null'
                }, {
                    type: 'text',
                    bRegex: true,
                    bSmart: true
                }, {
                    type: 'text',
                    bRegex: true,
                    bSmart: true
                }, {
                    type: 'text',
                    bRegex: true,
                    bSmart: true
                }, {
                    type: 'select',
                    bRegex: false,
                    bSmart: true,
                    values: vm.dtProductTypes
                }]

        });

        vm.dtColDefs_product = [
            DTColumnDefBuilder.newColumnDef(0), DTColumnDefBuilder.newColumnDef(1),
            DTColumnDefBuilder.newColumnDef(2), DTColumnDefBuilder.newColumnDef(3).withClass('none'),
            DTColumnDefBuilder.newColumnDef(4), DTColumnDefBuilder.newColumnDef(5).notSortable()
        ];
— Urvi_204
সূত্র
1

দুটি উপায় আছে, একটি আপনি যখন টেবিল শিরোনাম সংজ্ঞায়িত করেন তখন html এ সংজ্ঞায়িত হয়

<thead>
  <th data-orderable="false"></th>
</thead>

আর একটি উপায় জাভাস্ক্রিপ্ট ব্যবহার করা হচ্ছে, উদাহরণস্বরূপ, আপনার টেবিল রয়েছে

<table id="datatables">
    <thead>
        <tr>
            <th class="testid input">test id</th>
            <th class="testname input">test name</th>
    </thead>
</table>

তারপর,

$(document).ready(function() {
    $('#datatables').DataTable( {
        "columnDefs": [ {
            "targets": [ 0], // 0 indicates the first column you define in <thead>
            "searchable": false
        }
        , {
            // you can also use name to get the target column
            "targets": 'testid', // name is the class you define in <th>
            "searchable": false
        }
        ]
    }
    );
}
);
— শূন্য
সূত্র
0

আপনি এটির মতো নেতিবাচক সূচকও ব্যবহার করতে পারেন:

$('.datatable').dataTable({
    "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
    "sPaginationType": "bootstrap",
    "aoColumnDefs": [
        { 'bSortable': false, 'aTargets': [ -1 ] }
    ]
});
— নুরুল ফেরদৌস
সূত্র
0

কোডটি এর মতো দেখাবে:

$(".data-cash").each(function (index) {
  $(this).dataTable({
    "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
    "sPaginationType": "bootstrap",
    "oLanguage": {
      "sLengthMenu": "_MENU_ records per page",
      "oPaginate": {
        "sPrevious": "Prev",
        "sNext": "Next"
      }
    },
    "bSort": false,
    "aaSorting": []
  });
});
— পাইথন
সূত্র
0

এখানে উত্তর!

targets এটি কলাম নম্বর, এটি 0 থেকে শুরু হয়

$('#example').dataTable( {
  "columnDefs": [
    { "orderable": false, "targets": 0 }
  ]
} );
— BumbuKhan
সূত্র
-2

টেবিলের "ক্লাস" নো-সাজান "সেট করুন তারপর CSS যোগ করুন। নো-সারণি {পয়েন্টার-ইভেন্টগুলি: কিছুই নয়! গুরুত্বপূর্ণ; কার্সার: ডিফল্ট! গুরুত্বপূর্ণ; পটভূমি-চিত্র: কিছুই নয়! গুরুত্বপূর্ণ; } এর মাধ্যমে এটি তীরের আপডেটাউন এবং গোপনে ইভেন্টটি অক্ষম করবে।

— রাহুল
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.