কীভাবে পুনরায় লোড করবেন / রিফ্রেশ করবেন jQuery ডেটা টেবিল?

89

আমি কার্যকারিতা বাস্তবায়নের চেষ্টা করছি যার মাধ্যমে স্ক্রিনের একটি বোতামে ক্লিক করলে আমার jQuery ডেটা টেবিলটি রিফ্রেশ হবে (যেমন ডেটা টেবিল তৈরি হওয়ার পরে সার্ভার-সাইড ডেটা উত্স পরিবর্তিত হতে পারে)।

আমার যা আছে তা এখানে:

$(document).ready(function() {
    $("#my-button").click(function() {
        $("#my-datatable").dataTable().fnReloadAjax();
    });
});

তবে আমি যখন এটি চালাচ্ছি, এটি কিছুই করে না। বোতামটি ক্লিক করা হলে ডেটা টেবিলটি রিফ্রেশ করার উপযুক্ত উপায় কী? আগাম ধন্যবাদ!

javascript  jquery  datatables 
— আইএএমওয়াইর ফাজা
সূত্র
আপনি কি কোনও জাভাস্ক্রিপ্ট ত্রুটি পেয়েছেন? ফায়ারব্যাগ / ক্রোম ইন্সপেক্টর এর সাথে চেক করুন, সম্ভবত আরও কিছু কোড যুক্ত করুন (টেবিল এবং বোতামের কোড অর্থাত্)
— জের্ট
4
— zx1986

উত্তর:

33

আপনি নিম্নলিখিত চেষ্টা করতে পারেন:

function InitOverviewDataTable() {
    oOverviewTable = $('#HelpdeskOverview').dataTable({
        "bPaginate": true,
        "bJQueryUI": true, // ThemeRoller-stöd
        "bLengthChange": false,
        "bFilter": false,
        "bSort": false,
        "bInfo": true,
        "bAutoWidth": true,
        "bProcessing": true,
        "iDisplayLength": 10,
        "sAjaxSource": '/Helpdesk/ActiveCases/noacceptancetest'
    });
}

function RefreshTable(tableId, urlData) {
    $.getJSON(urlData, null, function(json) {
        table = $(tableId).dataTable();
        oSettings = table.fnSettings();

        table.fnClearTable(this);

        for (var i = 0; i < json.aaData.length; i++) {
            table.oApi._fnAddData(oSettings, json.aaData[i]);
        }

        oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
        table.fnDraw();
    });
}
// Edited by Prasad
function AutoReload() {
    RefreshTable('#HelpdeskOverview', '/Helpdesk/ActiveCases/noacceptancetest');

    setTimeout(function() {
        AutoReload();
    }, 30000);
}

$(document).ready(function() {
    InitOverviewDataTable();
    setTimeout(function() {
        AutoReload();
    }, 30000);
});

http://www.meadow.se/wordpress/?p=536

— জাভিয়ার
সূত্র
এটা অসাধারণ! তবে আমি পেয়েছি আপনি কল করছেন _fnAddDataযা কেবল একটি ব্যক্তিগত ফাংশন হিসাবে মনে করা হচ্ছে। এটি কি ঝুঁকিপূর্ণ? আসুন আমরা ভবিষ্যতে বলি ফাংশনের স্বাক্ষরটি পরিবর্তিত হতে পারে।
— রায় লিং
136

ডেটা টেবিলগুলির 1.10.0 সংস্করণ সহ, এটি অন্তর্নির্মিত এবং সহজ:

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

অথবা শুধুই

$('#example').DataTable().ajax.reload();

http://datatables.net/references/api/ajax.reload ()

— atmelino
সূত্র
20
সাবধান এবং ব্যবহার করুন $('#example').DataTable()এবং না $('#example').dataTable()।
— সেরগিউ 16
আমি এটি করার পরে আমি ডেটাটেবলের সামগ্রীটি অ্যাক্সেস করতে পারি না। এরপরে এটি বলে যে আমার কাছে কেবল 2 টিআর রয়েছে (একটি শিরোনামযুক্ত এবং একটিতে 1 টি সেল রয়েছে যেখানে কোনও ডেটা নেই)। আমাকে কি আগে এটিকে আবার আঁকতে হবে?
— জন কোটার 15:25
জন কোটার: আপনার কোড না দেখে আপনার প্রশ্নের উত্তর দেওয়া অসম্ভব। সমস্যার পুনরায় উত্পাদনের জন্য আপনার কোড সহ একটি নতুন প্রশ্ন হিসাবে পোস্ট করুন।
— atmelino
এটি একটি ত্রুটি ফেলে দিতে পারে cannot reinitialise datatable jquery। tableটেবিলে প্রতিটি প্রবেশের জন্য বারবার আরম্ভ করা হয়েছিল বলে এটি ঘটে । এড়াতে, নিশ্চিত হয়ে নিন যে আপনি table একবারে আরম্ভ করেছেন ।
— শুভম এ।
4
পেজিং তথ্য ব্যবহার সংরক্ষণ করুন। টেবিল.এজ্যাক্স.রেলোড (নাল, মিথ্যা), যেমন এখানে সরকারী নথিতে উল্লিখিত হয়েছে ডাট্যাবটেলফট / রেফারেন্স / এপি / অজ্যাক্স.রেলোড ()
— শ্রীনিবাস রথিক্রিন্দি
28

প্রথমে ডেটাটেবলটি ধ্বংস করুন এবং তারপরে ডেটাটেবল আঁকুন।

$('#table1').DataTable().destroy();
$('#table1').find('tbody').append("<tr><td><value1></td><td><value1></td></tr>");
$('#table1').DataTable().draw();
— সরিষ কৃষ্ণন
সূত্র
জিনিস এত জটিল কেন?
— আকমল
ধন্যবাদ এটি এখানে কেবলমাত্র উত্তর যা আসলে কাজ করে।
— সেরিন
27

এটিকে পুনরায় লোড করার জন্য আপনি ডেটা টেবিলের একটি বিস্তৃত এপিআই ব্যবহার করতে পারেন ajax.reload()

আপনি যদি আপনার ডেটেবলকে DataTable()(নতুন সংস্করণ) হিসাবে ঘোষণা করেন তবে আপনার প্রয়োজন:

var oTable = $('#filtertable_data').DataTable( );
// to reload
oTable.ajax.reload();

আপনি যদি আপনার ডেটেবলটিকে dataTable()(পুরানো সংস্করণ) হিসাবে ঘোষণা করেন তবে :

var oTable = $('#filtertable_data').dataTable( );
// to reload
oTable.api().ajax.reload();
— স্যুট এ.সুক
সূত্র
24

আমার একই সমস্যা ছিল, আমি এটি ঠিক করেছিলাম:

প্রথমে আপনার পছন্দের পদ্ধতির সাথে ডেটা পান, আমি ফলাফল জমা দেওয়ার পরে এজ্যাক্স ব্যবহার করি যা টেবিলে পরিবর্তন আনবে। তারপরে সাফ করুন এবং নতুন ডেটা যুক্ত করুন:

var refreshedDataFromTheServer = getDataFromServer();

var myTable = $('#tableId').DataTable();
myTable.clear().rows.add(refreshedDataFromTheServer).draw();

উত্সটি এখানে: https://datatables.net/references/api/clear ()

— মোস
সূত্র
4
অবশেষে একটি অজ্যাক্স উত্তর!
— ফ্যাবিও ভেন্টুরি যাজক
যে fnServerData: getDataFromServer?
— ডেরেক লী
একমাত্র উত্তর যা ডেটা হিসাবে একটি সাধারণ জেএস বিষয়বস্তু ব্যবহার করে আমার পক্ষে কাজ করেছিল। ধন্যবাদ!
— বানজি
13 
var ref = $('#example').DataTable();
ref.ajax.reload();

আপনি যদি ডেটা টেবিল ১.১০ এ পুনরায় লোড / রিফ্রেশ বোতামটি যুক্ত করতে চান তবে ড্রক্যালব্যাকটি ব্যবহার করুন ।

নীচে উদাহরণ দেখুন (আমি বুটস্ট্র্যাপ সিএসএস সহ ডেটা টেবিলগুলি ব্যবহার করছি )

var ref= $('#hldy_tbl').DataTable({
        "responsive": true,
        "processing":true,
        "serverSide":true,
        "ajax":{
            "url":"get_hotels.php",
            "type":"POST"
        },
        "drawCallback": function( settings ) {
            $('<li><a onclick="refresh_tab()" class="fa fa-refresh"></a></li>').prependTo('div.dataTables_paginate ul.pagination');
        }
    });

function refresh_tab(){
    ref.ajax.reload();
}
— ভাইবিন টিভি
সূত্র
11

আমি নিম্নলিখিত কোড ব্যবহার করার পরামর্শ দেব।

table.ajax.reload(null, false);

এর কারণ হিসাবে, ব্যবহারকারী পেজিং পুনরায় লোড পুনরায় সেট করা হবে না।
উদাহরণ:

<button id='refresh'> Refresh </button>

<script>
    $(document).ready(function() {

        table = $("#my-datatable").DataTable();
        $("#refresh").on("click", function () { 
         table.ajax.reload(null, false); 
        });

   });
</script>

এই সম্পর্কে বিস্তারিত এখানে পাওয়া যাবে

— অ্যাড কাহন
সূত্র
4
ঠিক জিনিসটা. রিফ্রেশ টেবিলের পরে পৃষ্ঠা নম্বর পরিবর্তন না করার জন্য
— মন্থান প্যাটেল
এর সমানtable.ajax.reload();
— কোডটোলাইফ
হ্যাঁ এটি উপরের সমান করে তবে আপনি পয়েন্টটি মিস করছেন। table.ajax.reload (); টেবিলটি রিফ্রেশ এবং রিসেট করবে, যদি আপনার 5 পৃষ্ঠায় থাকে এবং আপনি তা রিফ্রেশ করেন। এটি আপনাকে প্রথম পৃষ্ঠায় ফিরিয়ে নিয়ে যাবে।
— বিজ্ঞাপন কহন
3

এইভাবে আমি এটি করি ... সম্ভবত সবচেয়ে ভাল উপায় নয়, তবে এটি অবশ্যই সহজ (আইএমএইচও) এবং কোনও অতিরিক্ত প্লাগইন লাগবে না।

এইচটিএমএল

<div id="my-datatable"></div>

jQuery

function LoadData() {
    var myDataTable = $("#my-datatable").html("<table><thead></thead><tbody></tbody></table>");
    $("table",myDataTable).dataTable({...});
}
$(document).ready(function() {
    $("#my-button").click(LoadData);
    LoadData();
});

দ্রষ্টব্য: jQuery ডেটা টেবিলের সাথে আমার কাজকর্মগুলিতে, কখনও কখনও আপনার যদি <thead></thead><tbody></tbody>এটি না হয় তবে এটি কাজ করে না। তবে আপনি এটি ছাড়া এটি পেতে সক্ষম হতে পারে। কী প্রয়োজন তা কী করে এবং কী করে না তা আমি ঠিক বুঝতে পারি নি।

— ড্রু চ্যাপিন
সূত্র
3

প্রথমে ডেটাটেবল ধ্বংস করার চেষ্টা করুন এবং এটি আবার সেটআপ করুন, উদাহরণস্বরূপ

var table;
$(document).ready(function() {
    table = $("#my-datatable").datatable()
    $("#my-button").click(function() {
        table.fnDestroy();
        table = $("#my-datatable").dataTable();
    });
});
— হোং এনঘিয়া
সূত্র
3

আপনি যদি ইউআরএল বৈশিষ্ট্যটি ব্যবহার করেন তবে ঠিক করুন

table.ajax.reload()

আশা করি এটি কাউকে সাহায্য করে

— হারমান ডেমসং
সূত্র
3

আপনি যখন নিজের ডেটাটেবলটি রিফ্রেশ করতে চান তখন এই কোডটি ব্যবহার করুন: 

 $("#my-button").click(function() {
    $('#my-datatable').DataTable().clear().draw();
 });
— অ্যাডাগিওডেভ
সূত্র
2

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

এটার মত

<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.fnReloadAjax.js"></script>
— আরএএসজি
সূত্র
1

অ্যালান জার্ডিনের ডেটা টেবিলগুলি ট্যাবুলার ডেটা প্রদর্শনের জন্য খুব শক্তিশালী এবং চটজলদি jQuery প্লাগইন। এর অনেকগুলি বৈশিষ্ট্য রয়েছে এবং আপনি যা চান তা বেশিরভাগ ক্ষেত্রে করতে পারে। একটি বিষয় যা কৌতূহলজনকভাবে কঠিন, তা হল কীভাবে সরল উপায়ে বিষয়বস্তুগুলি রিফ্রেশ করা যায়, তাই আমি আমার নিজের রেফারেন্সের জন্য এবং সম্ভবত অন্যের উপকারের জন্যও যদি এটি করি তবে এখানে একটি উপায়ের একটি সম্পূর্ণ উদাহরণ রয়েছে:

এইচটিএমএল

<table id="HelpdeskOverview">
  <thead>
    <tr>
      <th>Ärende</th>
      <th>Rapporterad</th>
      <th>Syst/Utr/Appl</th>
      <th>Prio</th>
      <th>Rubrik</th>
      <th>Status</th>
      <th>Ägare</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

জাভাস্ক্রিপ্ট

function InitOverviewDataTable()
{
  oOverviewTable =$('#HelpdeskOverview').dataTable(
  {
    "bPaginate": true,
    "bJQueryUI": true,  // ThemeRoller-stöd
    "bLengthChange": false,
    "bFilter": false,
    "bSort": false,
    "bInfo": true,
    "bAutoWidth": true,
    "bProcessing": true,
    "iDisplayLength": 10,
    "sAjaxSource": '/Helpdesk/ActiveCases/noacceptancetest'
  });
}

function RefreshTable(tableId, urlData)
{
  $.getJSON(urlData, null, function( json )
  {
    table = $(tableId).dataTable();
    oSettings = table.fnSettings();

    table.fnClearTable(this);

    for (var i=0; i<json.aaData.length; i++)
    {
      table.oApi._fnAddData(oSettings, json.aaData[i]);
    }

    oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
    table.fnDraw();
  });
}

function AutoReload()
{
  RefreshTable('#HelpdeskOverview', '/Helpdesk/ActiveCases/noacceptancetest');

  setTimeout(function(){AutoReload();}, 30000);
}

$(document).ready(function () {
  InitOverviewDataTable();
  setTimeout(function(){AutoReload();}, 30000);
});

উৎস

— মিশেল আইরেস
সূত্র
1

var myTable = $ ('# tblIdName')। ডেটা টেবিল (); myTable.clear ()। rows.add (myTable.data) .ড্র ();

এটি আমার পক্ষে এজ্যাক্স ব্যবহার না করে কাজ করেছিল।

— টি-জয়ন্ত দোর
সূত্র
0 
        if(data.length==0){
            alert("empty");
              $('#MembershipTable > tbody').empty();
            // $('#MembershipTable').dataTable().fnDestroy();
                    $('#MembershipTable_info').empty(); 
                    $("#MembershipTable_length").empty();
                    $("#MembershipTable_paginate").empty();

             html="<tr><td colspan='20'><b>No data available in Table</b> </td></tr>";
           $("#MembershipTable").append(html);
        }

        else{
             $('#MembershipTable').dataTable().fnDestroy();
            $('#MembershipTable > tbody').empty();

         for(var i=0; i<data.length; i++){
            //

.......

— ব্যবহারকারী 4022380
সূত্র
0

ডেটাটেবল সহায়তা অনুসারে , আমি আমার টেবিলের জন্য করতে পারতাম।

আমি আমার ডেটা টেবেলে একাধিক ডাটাবেস চেয়েছিলাম।

উদাহরণস্বরূপ: ডেটা_1.জসন> 2500 রেকর্ডস - ডেটা_2.জসন> 300 রেকর্ডস - ডেটা_3.জসন> 10265 রেকর্ড

var table;
var isTableCreated= false;

if (isTableCreated==true) {
    table.destroy();
    $('#Table').empty(); // empty in case the columns change
}
else
    i++;

table = $('#Table').DataTable({
        "processing": true,
        "serverSide": true,
        "ordering": false,
        "searching": false,
        "ajax": {
            "url": 'url',
            "type": "POST",
            "draw": 1,
            "data": function (data) {
                data.pageNumber = (data.start / data.length);
            },
            "dataFilter": function (data) {
                return JSON.stringify(data);
            },
            "dataSrc": function (data) {
                if (data.length > 0) {
                    data.recordsTotal = data[0].result_count;
                    data.recordsFiltered = data[0].result_count;
                    return data;
                }
                else
                    return "";
            },

            "error": function (xhr, error, thrown) {
                alert(thrown.message)
            }
        },
        columns: [
           { data: 'column_1' },
           { data: 'column_2' },
           { data: 'column_3' },
           { data: 'column_4' },
           { data: 'column_5' }
        ]
    });
— সম্প্রদায়
সূত্র
0

যদি ডেটাটেবল v1.10.12 ব্যবহার করে থাকে তবে কেবল কলিং .draw()পদ্ধতি এবং প্রয়োজনীয় অঙ্কনের প্রকারগুলি পাস করার অর্থাত্ full-reset, pageতবে আপনি নতুন তথ্য দিয়ে আপনার ডিটিটি আবার আঁকবেন

let dt = $("#my-datatable").datatable()

// কিছু পদক্ষেপ

dt.draw('full-reset')

আরও ডেটেবল ডক্স পরীক্ষা করে দেখুন

— জিমি ওবনিও অ্যাবোর
সূত্র
0

আমি এর সাথে সম্পর্কিত এমন কিছু করেছি ... আপনার যা প্রয়োজন তা নীচে একটি নমুনা জাভাস্ক্রিপ্ট দেওয়া আছে। এখানে একটি ডেমো রয়েছে: http://codersfolder.com/2016/07/crud-with-php-mysqli-bootstrap-datatables-jquery-plugin/

//global the manage member table 
var manageMemberTable;

function updateMember(id = null) {
    if(id) {
        // click on update button
        $("#updatebutton").unbind('click').bind('click', function() {
            $.ajax({
                url: 'webdesign_action/update.php',
                type: 'post',
                data: {member_id : id},
                dataType: 'json',
                success:function(response) {
                    if(response.success == true) {                      
                        $(".removeMessages").html('<div class="alert alert-success alert-dismissible" role="alert">'+
                              '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'+
                              '<strong> <span class="glyphicon glyphicon-ok-sign"></span> </strong>'+response.messages+
                            '</div>');

                        // refresh the table

                        manageMemberTable.ajax.reload();

                        // close the modal
                        $("#updateModal").modal('hide');

                    } else {
                        $(".removeMessages").html('<div class="alert alert-warning alert-dismissible" role="alert">'+
                              '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'+
                              '<strong> <span class="glyphicon glyphicon-exclamation-sign"></span> </strong>'+response.messages+
                            '</div>');

                        // refresh the table                        
                        manageMemberTable.ajax.reload();

                        // close the modal
                        $("#updateModal").modal('hide');
                    }
                }
            });
        }); // click remove btn
    } else {
        alert('Error: Refresh the page again');
    }
}
— মাওয়াঙ্গি থিগা
সূত্র
-6

পুনরায় পুনর্নির্মাণের সাথে ডেটেবল যোগ্য এবং লিখুন সত্য হিসাবে পুনরায় পুনরুদ্ধার করুন .. সাধারণভাবে so

যেমন

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