ডেটাবেবল - ডেটাটেবলের বাইরে অনুসন্ধান বক্স

Question

আমি ডেটা টেবিলগুলি ( ডেটাবেলস.net ) ব্যবহার করছি এবং আমি আমার সন্ধান বাক্সটি টেবিলের বাইরে থাকতে চাই (উদাহরণস্বরূপ আমার শিরোলেখ বিভাগে)।

এটা কি সম্ভব ?

Answer 1

আপনি টেবিলটি ফিল্টার করতে ডেটা টেবিল এপিআই ব্যবহার করতে পারেন। সুতরাং আপনার যা দরকার তা হ'ল আপনার নিজস্ব ইনপুট ক্ষেত্রটি কীআপ ইভেন্টের সাথে ফিল্টার ফাংশনটি ডাটাবেসগুলিতে ট্রিগার করে। CSS বা jquery এর সাহায্যে আপনি বিদ্যমান অনুসন্ধান ইনপুট ক্ষেত্রটি আড়াল / মুছে ফেলতে পারেন। অথবা হয়ত ডেটা টেবিলগুলির এটিকে সরিয়ে / অন্তর্ভুক্ত করার জন্য একটি সেটিংস রয়েছে।

এটিতে ডেটাবেলস এপিআই ডকুমেন্টেশন চেকআউট করুন।

উদাহরণ:

এইচটিএমএল

<input type="text" id="myInputTextField">

জাতীয়

oTable = $('#myTable').DataTable();   //pay attention to capital D, which is mandatory to retrieve "api" datatables' object, as @Lionel said
$('#myInputTextField').keyup(function(){
      oTable.search($(this).val()).draw() ;
})

Comments

আপনার অবশ্যই স্পষ্টভাবে .keypress এর পরিবর্তে .keyup ব্যবহার করা উচিত, অন্যথায় আপনি ফলাফলগুলিতে বিলম্ব অনুভব করতে পারেন

— সাভার

আমি $(".dataTables_filter :input").focus().val(value).keypress();এটি keyupখুঁজে পাওয়ার আগে প্রায় এক ঘন্টা আমার ইনপুটটিতে রাখার সাথে গোলমাল করেছি। যদিও কখনও এপিআই ব্যবহার করবেন না .. মার্জিত সমাধান!

— ম্যাটসিজল

জেএসকে fnFilter এর জায়গায়। Search ($ (এটি) .val ()) .Rw () ব্যবহার করার জন্য পরিবর্তন করতে হবে। দেখুন: datatables.net/manual/api#Chaining আমি এটি ঠিক করার জন্য এই উত্তরটি পরিবর্তন করেছি, তবে মনে হয় এটি প্রথমে সমমনা পর্যালোচনা করা দরকার।

— শেন গ্রান্ট

মন্তব্য: আপনার এখনও "সন্ধান: সত্য" বিকল্পের প্রয়োজন হবে এবং তারপরে আপনি সম্ভবত ডিফল্ট অনুসন্ধান বাক্সটি আড়াল করতে চান সুতরাং sDOM বিকল্পটি বাতিল করতে হবে।

— Bang

ইনস্টল করা হচ্ছে $ ()। একটি ছোট "d" দিয়ে ডেটা টেবিল () কোনও ডেটাবেলস এপিআইয়ের উদাহরণের পরিবর্তে একটি jQuery অবজেক্ট ফিরিয়ে দেবে। পরবর্তীটি "oTable = $ ('# myTable')) কল করে অর্জন করা যায় Data ডেটা টেবিল ();" মূলধন "ডি" সহ। এটিতে এটি অনুসন্ধান করতে সক্ষম হওয়া প্রয়োজন (অন্যথায় যদি কোনও "ফাংশন অপরিজ্ঞাত" ত্রুটি ফেলে দেয়)। দেখুন: ডেটাবেবলস.ফ্যাফস

— লিওনেল

Answer 2

@ লভকজেড মন্তব্য অনুসারে:

আপনি যদি বড় হাতের ডি দিয়ে ডেটাটেবল ব্যবহার করেন তবে .DataTable()(এটি একটি ডেটাটেবল এপিআই অবজেক্ট ফিরিয়ে দেবে) এটি ব্যবহার করুন:

 oTable.search($(this).val()).draw() ;

যা @ নেটব্রইন উত্তর।

আপনি যদি ছোট হাতের ডি দিয়ে ডেটাটেবল ব্যবহার করে থাকেন .dataTable()(এটি কোনও জিকিউরিটি ফেরত দেবে) এটি ব্যবহার করুন:

 oTable.fnFilter($(this).val());

Comments

oTable.fnFilter($(this).val());আমার জন্যও কাজ করেছেন,

— shabeer90

আপনি কীভাবে ডেটেবলকে কল করছেন তার উপর নির্ভর করে উভয় পদ্ধতিই বৈধ: T oTable.search ($ (এটি) .val ())। অঙ্কন (); you আপনি যখন কল করবেন তখন ব্যবহার করবেন: .DataTable()এবং এইটি: oTable.fnFilter($(this).val());আপনি যখন .dataTable() পার্থক্যটি ব্যবহার করবেন তখন রাজধানীতে ডি আশা করি এটি সাহায্য করবে!

— Lvkz

"হয় একটি ফাংশন oTable.fnFilter নয়" datatables সংস্করণ 1.10.5 জন্য ত্রুটি দেয় একটি

— Ege Bayrak

ঠিক বুঝতে পেরেছি যে jQuery এর সাহায্যে আপনি ডেটাবেস এপিআইও oTable.api().search($(this).val()).draw();এটির মতো অ্যাক্সেস করতে পারবেন: এটি কার্যকর হতে পারে, বিশেষত আপনি যদি lengthoTable.api().page.len($(this).val()).draw();

— পৃষ্ঠাগুলির

Answer 3

আপনি sDomএটির জন্য বিকল্পটি ব্যবহার করতে পারেন ।

নিজস্ব ডিভাইসে অনুসন্ধান ইনপুট সহ ডিফল্ট:

sDom: '<"search-box"r>lftip'

আপনি যদি jQuery UI ব্যবহার করেন ( bjQueryUIসেট করুন true):

sDom: '<"search-box"r><"H"lf>t<"F"ip>'

উপরেরগুলি অনুসন্ধান / ফিল্টারিং inputউপাদানটিকে তার নিজস্ব divশ্রেণীর সাথে search-boxরাখবে যা প্রকৃত সারণির বাইরে রয়েছে।

যদিও এটি তার বিশেষ শর্টহ্যান্ড সিনট্যাক্স ব্যবহার করে এটি আসলে আপনি এতে ফেলে দেওয়া কোনও HTML নিতে পারে take

Comments

@ মার্কাস: আসলে আমি অনুভব করি যে এসডম ব্যবহারের জন্য যথেষ্ট মার্জিত নয়, এই সত্যটি বাদ দিন যে আমরা অনুসন্ধান বাক্সটিকে পুরোপুরি কাস্টমাইজ করতে পারি না (সেই বাক্সটিতে একটি হার্ডকোড "অনুসন্ধান" পাঠ্য রয়েছে)।

— হোং লং

তবে এটি এখনও ডিভ্যাডেটেবল_রাপ্পারের অভ্যন্তরে, এটিকে এর বাইরেও সরানোর কোনও উপায়?

— আর্টুর79

@ আরতুর Sad৯ ডেটাবলের উত্স হ্যাকিং ছাড়া না, অন্তত।

— মেকওয়াল

<333 এই সিনট্যাক্সটি '<"search-box"r><"H"lf>t<"F"ip>'আরও খারাপ কিছু আছে কিনা তা নিশ্চিত নয়

— ক্রিশ্চিয়ান ই

@ হোওংলং আপনি এই জাতীয় বিকল্পগুলি ব্যবহার করে অনুসন্ধান বাক্সটি কাস্টমাইজ করতে পারেন:language: { search: "example", searchPlaceholder: "example" }

— ফ্লেম

Answer 4

এইটি আমাকে ডেটা টেবিল সংস্করণ 1.10.4 এর জন্য সহায়তা করেছে, কারণ এটির নতুন এপিআই

var oTable = $('#myTable').DataTable();    
$('#myInputTextField').keyup(function(){
   oTable.search( $(this).val() ).draw();
})

Comments

"Var oTable = $ ('# myTable') এর মূলধন" ডি "নোট করুন Data ডেটা টেবিল ();" ( ডাটাবেবলস.এনএফএএক্স / #api )

— লিওনেল

Answer 5

আরও সাম্প্রতিক সংস্করণগুলির একটি আলাদা বাক্য গঠন রয়েছে:

var table = $('#example').DataTable();

// #myInput is a <input type="text"> element
$('#myInput').on('keyup change', function () {
    table.search(this.value).draw();
});

নোট করুন যে এই উদাহরণটি tableযখন ডেটাবেবলগুলি প্রথম শুরু করা হয় তখন নির্ধারিত পরিবর্তনশীল ব্যবহার করে । আপনার যদি এই ভেরিয়েবলটি উপলভ্য না হয় তবে কেবল ব্যবহার করুন:

var table = $('#example').dataTable().api();

// #myInput is a <input type="text"> element
$('#myInput').on('keyup change', function () {
    table.search(this.value).draw();
});

যেহেতু: ডেটা টেবিল 1.10

- উত্স: https://datatables.net/references/api/search ()

Answer 6

এটি আপনার পক্ষে কাজ করা উচিত: (ডেটা টেবিলগুলি 1.10.7)

oTable = $('#myTable').dataTable();

$('#myInputTextField').on('keyup change', function(){
  oTable.api().search($(this).val()).draw();
})

অথবা

oTable = $('#myTable').DataTable();

$('#myInputTextField').on('keyup change', function(){
  oTable.search($(this).val()).draw();
})

Answer 7

আমারও একই সমস্যা ছিল।

আমি পোস্ট করা সমস্ত বিকল্প চেষ্টা করেছিলাম, কিন্তু কোনও কাজ নয়, আমি এমন একটি উপায় ব্যবহার করেছি যা সঠিক নয় তবে এটি পুরোপুরি কার্যকরভাবে কাজ করেছিল।

উদাহরণ অনুসন্ধান ইনপুট

<input id="serachInput" type="text"> 

jquery কোড

$('#listingData').dataTable({
  responsive: true,
  "bFilter": true // show search input
});
$("#listingData_filter").addClass("hidden"); // hidden search input

$("#serachInput").on("input", function (e) {
   e.preventDefault();
   $('#listingData').DataTable().search($(this).val()).draw();
});

Answer 8

আপনি যদি সার্ভার-সাইড প্রসেসিং ব্যবহার করেন ( সার্ভারসাইড বিকল্পটি দেখুন) তবে @ নেটব্রইনের উত্তরে প্রাসঙ্গিকভাবে আমি আরও একটি জিনিস যুক্ত করতে চাই ।

ডেটাবেবল দ্বারা ডিফল্টরূপে সম্পাদিত ক্যোরি থ্রোটলিং ( অনুসন্ধানডেলি বিকল্পটি দেখুন) .search()API কলটিতে প্রযোজ্য নয় । আপনি নিম্নলিখিত উপায়ে f .fn.dataTable.util.throcolate () ব্যবহার করে এটি ফিরে পেতে পারেন :

var table = $('#myTable').DataTable();
var search = $.fn.dataTable.util.throttle(
    function(val) {
        table.search(val).draw();
    },
    400  // Search delay in ms
);

$('#mySearchBox').keyup(function() {
    search(this.value);
});

Answer 9

fnDrawCallbackফাংশনটি ব্যবহার করে টেবিলটি আঁকলে আপনি ডিভটি সরাতে পারেন ।

    $("#myTable").dataTable({
    "fnDrawCallback": function (oSettings) {
        $(".dataTables_filter").each(function () {
            $(this).appendTo($(this).parent().siblings(".panel-body"));
        });
    }
});

Comments

অথবা আপনি যদি ডেটাটেবলের একটি নতুন সংস্করণ ব্যবহার করেন তবে আপনার কাছে রয়েছে:"drawCallback": function (settings) { $(".dataTables_filter").each(function () { $(this).appendTo($(this).parent().siblings(".panel-body")); }); },

— ড্যানিয়েল ডুডাস

Answer 10

$('#example').DataTable({
   "bProcessing": true,
   "bServerSide": true,
   "sAjaxSource": "../admin/ajax/loadtransajax.php",
   "fnServerParams": function (aoData) {
        // Initialize your variables here
        // I have assign the textbox value for "text_min_val"
        var min_val = $("#min").val();  //push to the aoData
        aoData.push({name: "text_min_val", value:min_val});
   },
   "fnCreatedRow": function (nRow, aData, iDataIndex) {
       $(nRow).attr('id', 'tr_' + aData[0]);
       $(nRow).attr('name', 'tr_' + aData[0]);
       $(nRow).attr('min', 'tr_' + aData[0]); 
       $(nRow).attr('max', 'tr_' + aData[0]); 
   }
});

ইন loadtransajax.phpআপনি পেতে মান পেতে পারে:

if ($_GET['text_min_val']){
    $sWhere = "WHERE ("; 
    $sWhere .= " t_group_no LIKE '%" . mysql_real_escape_string($_GET['text_min_val']) . "%' ";
    $sWhere .= ')';
}

Answer 11

আপনি যদি জিকিউরি ডেটা টেবিল ব্যবহার করেন তবে আপনাকে কেবল যুক্ত করতে হবে "bFilter":true। এটি টেবিলের বাইরে ডিফল্ট অনুসন্ধান বাক্স এবং এটির কাজটি গতিশীলভাবে প্রদর্শন করবে ... যেমন প্রত্যাশিত

$("#archivedAssignments").dataTable({
                "sPaginationType": "full_numbers",
                "bFilter":true,
                "sPageFirst": false,
                "sPageLast": false,
                "oLanguage": {
                "oPaginate": {
                    "sPrevious": "<< previous",
                    "sNext" : "Next >>",
                    "sFirst": "<<",
                    "sLast": ">>"
                    }
                },
            "bJQueryUI": false,
            "bLengthChange": false,
            "bInfo":false,
            "bSortable":true
        });    

Comments

প্রশ্নটি ছিল গতিশীলভাবে তৈরি করা অবস্থানের পরিবর্তন করা। এটিকে টেবিলের বাইরে রাখুন

— এমসির