comprendre un code ajax

par **R00T** » 22 mars 2022, 01:09

je vous remercie de votre repense j'ai compris un peux le mode de fonctionnement mai j'ai pas pu faire ce que je voulais vu que je connais pas grade chose en ajax
voila les appel ajax

var product_table;
        var columns = [];
        //var filter_by_category_list = [];
                obj = {};
                obj['data'] = 'select_product';
                obj['className'] = 'select_product';
                obj['orderable'] = false;
                columns.push(obj);
                    obj = {};
                obj['data'] = 'image';
                obj['className'] = 'image';
                obj['orderable'] = false;
                columns.push(obj);
                    obj = {};
                obj['data'] = 'name';
                obj['className'] = 'name';
                obj['orderable'] = true;
                columns.push(obj);
                    obj = {};
                obj['data'] = 'price';
                obj['className'] = 'price';
                obj['orderable'] = false;
                columns.push(obj);
                    obj = {};
                obj['data'] = 'stock';
                obj['className'] = 'stock';
                obj['orderable'] = false;
                columns.push(obj);
                    obj = {};
                obj['data'] = 'categories';
                obj['className'] = 'categories';
                obj['orderable'] = false;
                columns.push(obj);
                    obj = {};
                obj['data'] = 'date';
                obj['className'] = 'date';
                obj['orderable'] = true;
                columns.push(obj);
                    obj = {};
                obj['data'] = 'status';
                obj['className'] = 'status';
                obj['orderable'] = false;
                columns.push(obj);
                    obj = {};
                obj['data'] = 'actions';
                obj['className'] = 'actions';
                obj['orderable'] = false;
                columns.push(obj);
            product_table = $('#product_table').DataTable({
            'ordering': true,
            'searching': false,
            "processing": true,
            "serverSide": true,
            "lengthChange": false,
            "responsive": true,
            "language": {
                "emptyTable": "Aucun produit trouvé !",
                "processing": "En cours...",
                "info": "Affichage de _START_ à  _END_ sur _TOTAL_ produits",
                "infoEmpty": "Affichage 0 à 0 de 0 produits",
                "lengthMenu": "Nombre de lignes _MENU_",
                "zeroRecords": "Aucun produit correspondant trouvé",
                "search": "Recherche :",
                "paginate": {
                    "next": "Suivant",
                    "previous": "Précédent"
                },
            },
            "drawCallback": function(settings){
                //$( "#product_cat" ).detach();
                $('thead tr th.select_product').removeClass('sorting_asc');
                $('thead tr th.image').removeClass('sorting_asc');
//                var product_cat_sel = $('<select id="product_cat" class="wcmp-filter-dtdd wcmp_filter_product_cat form-control">').appendTo("#product_table_length");
//                product_cat_sel.append($("<option>").attr('value', '').text('Sélectionnez une catégorie'));
//                $(filter_by_category_list).each(function () {
//                    product_cat_sel.append($("<option>").attr('value', this.key).text(this.label));
//                });
//                if(settings.oAjaxData.product_cat){
//                    product_cat_sel.val(settings.oAjaxData.product_cat);
//                }
                if(settings.json.notices.length > 0 ){
                    $('.wcmp-wrapper .notice-wrapper').html('');
                    $.each(settings.json.notices, function( index, notice ) {
                        if(notice.type == 'success'){
                            $('.wcmp-wrapper .notice-wrapper').append('<div class="woocommerce-message" role="alert">'+notice.message+'</div>');
                        }else{
                            $('.wcmp-wrapper .notice-wrapper').append('<div class="woocommerce-error" role="alert">'+notice.message+'</div>');
                        }
                    });
                }
            },
            "ajax": {
                url: '/wp-admin/admin-ajax.php?action=wcmp_vendor_product_list',
                type: "post",
                data: function (data) {
                    data.products_filter_action = $('form#wcmp_product_list_form').serialize();
                    data.post_status = "all";
                    data.product_cat = $('#product_cat').val();
                    data.bulk_action = $('#product_bulk_actions').val();
                    data.search_keyword = $('#pro_search_key').val();
                },
                error: function(xhr, status, error) {
                    $("#product_table tbody").append('<tr class="odd"><td valign="top" colspan="9" class="dataTables_empty" style="text-align:center;">'+error+' - <a href="javascript:window.location.reload();">Recharger</a></td></tr>');
                    $("#product_table_processing").css("display","none");
                }
            },
            "columns": columns,
            "createdRow": function (row, data, index) {
                $(row).addClass('vendor-product');
            }
        });
        new $.fn.dataTable.FixedHeader( product_table );
//        $(document).on('change', '#product_cat', function () {
//            product_table.ajax.reload();
//        });
        $(document).on('click', '#pro_search_btn', function () {
            product_table.ajax.reload();
        });
        $(document).on('click', '#product_list_do_filter', function (e) {
            product_table.ajax.reload();
        });
        $(document).on('click', '#product_list_do_bulk_action', function (e) {
            product_table.ajax.reload();
        });
    });</script>

mon but est de supprimer le tableaux et faire un affichage classique du genre

nom du produit 1
stock
prix
date
action
nom du produit 2
stock
prix
date
action
...
pouvez vous SVP me dire comment je peux faire sa ?

par **@rthur** » 21 mars 2022, 12:49

Bonjour,

Il utilise visiblement la librairie javascript DataTable, donc en lisant la doc tu devrais mieux comprendre son fonctionnement :
https://datatables.net/examples/ajax/objects.html

Pour comprendre encore davantage vu qu'il s'agit d'Ajax et donc du HTML et du Javascript, il faudrait plutôt que tu regardes :
1) la source HTML de ta page (et pas le code PHP qui le génère)
2) les outils de développement de ton navigateur (Ctrl+Maj+i sur Firefox et Chrome) et notamment l'onglet réseau pour voir les appels Ajax et pouvoir les comprendre et debuguer.

par **R00T** » 20 mars 2022, 11:56

bonjour
j'ai un petit souci je suis nul en ajax et je doit faire des modification a un fichier
e ce que quelqu'un peux m'expliquer svp comment il a fait la déclaration de la table (product_table ) et comment il la remplis ?
je vous remercie d'avance pour vos repense

Code : Tout sélectionner

<?php
/*
 * The template for displaying vendor products
 * Override this template by copying it to yourtheme/dc-product-vendor/vendor-dashboard/product-manager/products.php
 *
 * @author 	WC Marketplace
 * @package 	WCMp/Templates
 * @version   3.0.0
 */
if (!defined('ABSPATH')) {
    // Exit if accessed directly
    exit;
}
global $WCMp, $wpdb;
$vendor = get_wcmp_vendor(get_current_vendor_id());
do_action('before_wcmp_vendor_dashboard_product_list_table');
?>
<div class="col-md-12 all-products-wrapper">
    <div class="panel panel-default panel-pading">
       
        <form method="post" name="wcmp_product_list_form" id="wcmp_product_list_form">
      
            
        <table id="product_table" class="table table-striped table-bordered" cellspacing="0" width="100%">
            <thead><tr>
            <?php
            if ($products_table_headers) {
                foreach ($products_table_headers as $key => $value) {
                    if($key == 'select_product'){ ?>
                        <th class="text-center" data-lable="<?php echo $key ?>"><input type="checkbox" class="select_all_all" onchange="toggleAllCheckBox(this, 'product_table');" /></th>
                    <?php }else{ ?>
                        <th data-lable="<?php echo $key ?>"><?php echo $value ?></th>
                    <?php }
                }
            }
            ?>
            </tr></thead>
        </table>
       
        </form>
    </div>
</div>
<?php do_action('after_wcmp_vendor_dashboard_product_list_table'); ?>
<script>
    jQuery(document).ready(function ($) { 
        var product_table;
        var columns = [];
        //var filter_by_category_list = [];
<?php
if ($products_table_headers) {
    $enable_ordering = apply_filters('wcmp_vendor_dashboard_product_list_table_orderable_columns', array('name', 'date'));
    foreach ($products_table_headers as $key => $value) {
        $orderable = 'false';
        if (in_array($key, $enable_ordering)) {
            $orderable = 'true';
        }
        if($key == 'select_product') $orderable = 'false';
        ?>
                obj = {};
                obj['data'] = '<?php echo $key; ?>';
                obj['className'] = '<?php echo $key; ?>';
                obj['orderable'] = <?php echo $orderable; ?>;
                columns.push(obj);
    <?php
    }
}

?>
        product_table = $('#product_table').DataTable({
            "ajax": {
                url: '<?php echo add_query_arg( 'action', 'wcmp_vendor_product_list', $WCMp->ajax_url() ); ?>',
                type: "post",
                data: function (data) {},
            },
            "columns": columns,
       });
        
    });
</script>

comprendre un code ajax

Répondre

Étendre la vue Revue du sujet : comprendre un code ajax

Re: comprendre un code ajax

Re: comprendre un code ajax

comprendre un code ajax