Skip to content
This repository was archived by the owner on Feb 2, 2025. It is now read-only.

ng-click ne transmet pas les données AngularJs datatable #1468

Closed
LH1775 opened this issue Aug 24, 2020 · 5 comments
Closed

ng-click ne transmet pas les données AngularJs datatable #1468

LH1775 opened this issue Aug 24, 2020 · 5 comments
Labels
Angular question

Comments

@LH1775
Copy link

LH1775 commented Aug 24, 2020

Salut;
ja'ai un souci avec ma table de données réactif angularJs. J'ai utilisé la solution de @marcokorb in #552 (comment). Le tableau est responsive mais mes données ne sont pas transmise à mon controller.
Besoin d'aide svp.

App.controller("MyCtrl", MyCtrl);

function MyCtrl($q, DTOptionsBuilder, DTColumnDefBuilder, $compile, $scope) {
var vm = this;
function renderer(api, rowIdx, columns) {
var data = $.map( columns, function ( col, i ) {
return col.hidden ?
'

  • '+
    ''+col.title+ ' '+
    ''+ col.data+ ''+
    '
    • ' : '';
    }).join('');
    return data ?
    $compile(angular.element($('
      ').append( data )))($scope) : false;
      };

      vm.dtOptions = DTOptionsBuilder.newOptions().withOption('responsive', {
    details: {
        renderer: renderer
    }
})

      }

      mon code html

      # Name Surname(s) Tel Actions
      {{key+1}} {{item.name}} {{item.surname}} {{item.tel}}
    @marcokorb
    Copy link

    Hello, sorry for the late response. Do you still need help?

    @LH1775
    Copy link
    Author

    LH1775 commented Oct 23, 2020 via email

    @marcokorb
    Copy link

    marcokorb commented Oct 23, 2020 •
    edited
    Loading

    Hi, how are you constructing your table and rendering your data? Are you using ng-repeat to render the data? Or DTOptionsBuilder and DTColumnBuilder?

    I created a simple example with both, but it seems like only by using DTOptionsBuilder and DTColumnBuilder, the responsive plugin is working. I'll paste here how I did, and you can try in your project.

    This is my html:

    <!doctype html>
<html lang="en" ng-app="demoApp">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css"/>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.6/css/responsive.dataTables.min.css"/>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    </head>
    <body>        
        <main ng-controller="DemoController as vm" class="container">
            <table 
                datatable=""
                dt-options="vm.dtOptions"
                dt-columns="vm.dtColumns"
                class="row-border hover"
                width="100%"
            >
            </table>
        </main>
    </body>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.6/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
    <script src="angular-datatables/angular-datatables.min.js"></script>
    <script src="main.js"></script>
</html>

    And this is my js:

    var module = angular.module('demoApp', ['datatables']);

module.controller('DemoController', DemoController);

function DemoController($compile, $q, $scope, DTColumnBuilder, DTOptionsBuilder) {
    var vm = this;

    vm.items = [
        {
            id: 1,
            firstName: 'Yuzuki',
            lastName: 'Eba'
        },
        {
            id: 2,
            firstName: 'Kirishima',
            lastName: 'Haruto'
        }
    ]

    vm.dtOptions = DTOptionsBuilder
        .fromFnPromise(getData)
        .withOption('responsive', {
            details: {
                renderer: renderer
            }
        });
        

    vm.dtColumns = [
        DTColumnBuilder.newColumn('id').withTitle('ID'),
        DTColumnBuilder.newColumn('firstName').withTitle('First Name').renderWith(renderFirstName),
        DTColumnBuilder.newColumn('lastName').withTitle('Last name').renderWith(renderLastName).withClass('none')
    ];

    function getData() {
        var deferred = $q.defer();

        deferred.resolve(vm.items);

        return deferred.promise;
    }

    function renderFirstName(data, type, full) {
        return '<b style="color: blue">' + data + '</b>'
    }

    function renderLastName(data, type, full) {
        return '<b style="color: red">' + data + '</b>'
    }

    function renderer( api, rowIdx, columns ) {
        var data = $.map( columns, function ( col, i ) {
             return col.hidden ?
                 '<li data-dtr-index="'+col.columnIndex+'" data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
                      '<span class="dtr-title">'+
                          col.title+
                    '</span> '+
                    '<span class="dtr-data">'+
                        col.data+
                   '</span>'+
               '</li>' : 
               '';
           }).join('');

        return data ?
            $compile(angular.element($('<ul data-dtr-index="'+rowIdx+'"/>').append( data )))($scope) :  
            false;
    }
}

    Hope I can help!

    @LH1775
    Copy link
    Author

    LH1775 commented Oct 24, 2020 via email

    @shanmukhateja
    Copy link
    Collaborator

    @LH1775 Please close the issue if it has been resolved.

    @LH1775 LH1775 closed this as completed Dec 2, 2020
    Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
    Assignees
    No one assigned
    Labels
    Angular question
    Projects
    None yet
    Milestone
    No milestone
    Development

    No branches or pull requests
    3 participants
    @marcokorb @shanmukhateja @LH1775