Update Data (Rows) in SmartAdmin

ronaldrenteria · July 2018

Hello, I'm using the SmartAdmin template used by Datatables.net, so far everything works very well, but I see the obligation to delete records from the table that is being shown to the user, what I do is delete the record from the database of data, and I am trying to irrigate the table with the updated data but I have not achieved it, if someone can give me a hand with that, thank you very much.

Sorry for my English, it's very bad

colin · July 2018

Hi @ronaldrenteria ,

I'm not familiar with SmartAdmin, but to remove rows with the API, you can use rows().remove() (or the singular row().remove()). If it's an Ajax sourced table, you can reload the data with ajax.reload(), or if the row has been removed from the DOM, you can use rows().invalidate() to force a reload of the data.

Hope that helps,

Cheers,

Colin

ronaldrenteria · July 2018

@colin thank you for answering the question, I will be honest and is that what I intend is not to do JS code, what I intend is to do TS code, all this because I want the code to be native.

I have not managed to do it.

What I am doing now is this:

this.index();
var table = $('# tblChurches').DataTable();
table.ajax.reload (this.options, false);

In the index method what I do is:

public index () {
    this.options = {
      Sun: 'Bfrtip',
      ajax: (data, callback, settings) => {
        this._chuchService.index (). subscribe ((response: any) => {
          callback ({
            aaData: response
          });
        });
      },
      columns: [
        {data: 'name'},
        {data: 'foundation_date'},
        {data: 'address'},
        {data: 'phone'},
        {data: 'mail'},
        {
          render: (data, type, fullRow, meta) => {
            return <div align =" center ">                         <button class = "btn btn-xs btn-info action-edit" data-id = "$ {                           fullRow.id                         } "> edit </ button>                         <button class = "btn btn-xs btn-danger action-delete" data-id = "$ {                           fullRow.id                         } "> delete </ button>                     </ div>;
          }
        }
      ]
    };
  }

All this works correctly, but it throws me a JQuery error.

What I intend is not to have an error in JQuery.

This is the implementation code for datatables.net in SmartAdmin written in TypeScrip

import {
  Component,
  Input,
  ElementRef,
  AfterContentInit,
  OnInit
} from "@ angular / core";

import "script-loader! smartadmin-plugins / datatables / datatables.min.js";

@Component ({
  selector: "sa-datatable",
  template:       <table class = "dataTable responsive {{tableClass}}" width = "{{width}}">         <ng-content> </ ng-content>       </ table>
  styles: [require ("smartadmin-plugins / datatables / datatables.min.css")]
})
export class DatatableComponent implements OnInit {
  @Input () public options: any;
  @Input () public filter: any;
  @Input () public detailsFormat: any;

  @Input () public paginationLength: boolean;
  @Input () public columnsHide: boolean;
  @Input () public tableClass: string;
  @Input () public width: string = "100%";

constructor (private on: ElementRef) {}

  ngOnInit () {
    this.render ();
  }

  render () {
    let element = $ (this.el.nativeElement.children [0]);
    let options = this.options || {};

    let toolbar = "";
    if (options.buttons) toolbar + = "B";
    if (this.paginationLength) toolbar + = "l";
    if (this.columnsHide) toolbar + = "C";

    if (typeof options.ajax === "string") {
      let url = options.ajax;
      options.ajax = {
        url: url
        // complete: function (xhr) {
        //
        //}
      };
    }

    options = $ .extend (options, {
      sun:
        "<'dt-toolbar' <'col-xs-12 col-sm-6'f> <' col-sm-6 col-xs-12 hidden-xs text-right '" +
        toolbar +
        "> r>" +
        "t" +
        "<'dt-toolbar-footer' <'col-sm-6 col-xs-12 hidden-xs'i> <' col-xs-12 col-sm-6'p >>",
      oLanguage: {
        sSearch:
          "<span class = 'input-group-addon'> <i class = 'glyphicon glyphicon-search'> </ i> </ span>",
        sLengthMenu: "MENU"
      },
      autoWidth: false,
      retrieve: true,
      responsive: true,
      initComplete: (settings, json) => {
        element
          .parent ()
          .find (". input-sm")
          .removeClass ("input-sm")
          .addClass ("input-md");
      }
    });

const _dataTable = element.DataTable (options);

    if (this.filter) {
      // Apply the filter
      element.on ("keyup change", "thead th input [type = text]", function () {
        _dataTable
          .column (
            $ (this)
              .parent ()
              .index () + ": visible"
          )
          .search (this.value)
          .draw ();
      });
    }

    if (! toolbar) {
      element
        .parent ()
        .find (".dt-toolbar")
        .append (
          '

<

div class = "text-right"> <img src = "assets / img / logo.png" alt = "SmartAdmin" style = "width: 111px; margin-top: 3px; margin-right: 10px;"> </ div> '
);
}

    if (this.detailsFormat) {
      let format = this.detailsFormat;
      element.on ("click", "td.details-control", function () {
        var tr = $ (this) .closest ("tr");
        var row = _dataTable.row (tr);
        if (row.child.isShown ()) {
          row.child.hide ();
          tr.removeClass ("shown");
        } else {
          row.child (format (row.data ())). show ();
          tr.addClass ("shown");
        }
      });
    }
  }
}

kthorngren · July 2018

throws me a JQuery error.

What is the error message?

Kevin

ronaldrenteria · July 2018

ERROR TypeError: c is not a function
at HTMLTableElement.eval (eval at module.exports (addScript.js:27), <anonymous>:170:352)
at HTMLTableElement.fn (jquery.js:4932)
at HTMLTableElement.dispatch (jquery.js:5183)
at HTMLTableElement.elemData.handle (jquery.js:4991)
at Object.trigger (jquery.js:8249)
at HTMLTableElement.eval (jquery.js:8327)
at Function.each (jquery.js:354)
at jQuery.fn.init.each (jquery.js:189)
at jQuery.fn.init.trigger (jquery.js:8326)
at s (eval at module.exports (addScript.js:27), <anonymous>:113:20)
defaultErrorLogger @ core.js:1448
ErrorHandler.handleError @ core.js:1509
next @ core.js:5497
schedulerFn @ core.js:4331
SafeSubscriber.__tryOrUnsub @ Subscriber.js:243
SafeSubscriber.next @ Subscriber.js:190
Subscriber._next @ Subscriber.js:131
Subscriber.next @ Subscriber.js:95
Subject.next @ Subject.js:56
EventEmitter.emit @ core.js:4311
(anonymous) @ core.js:4771
ZoneDelegate.invoke @ zone.js:388
Zone.run @ zone.js:138
NgZone.runOutsideAngular @ core.js:4697
onHandleError @ core.js:4771
ZoneDelegate.handleError @ zone.js:392
Zone.runTask @ zone.js:191
ZoneTask.invokeTask @ zone.js:496
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566
error (async)
customScheduleGlobal @ zone.js:1666
ZoneDelegate.scheduleTask @ zone.js:407
onScheduleTask @ zone.js:297
ZoneDelegate.scheduleTask @ zone.js:401
Zone.scheduleTask @ zone.js:232
Zone.scheduleEventTask @ zone.js:258
(anonymous) @ zone.js:1831
(anonymous) @ http.js:2355
Observable._trySubscribe @ Observable.js:172
Observable.subscribe @ Observable.js:160
subscribeToResult @ subscribeToResult.js:23
MergeMapSubscriber._innerSub @ mergeMap.js:138
MergeMapSubscriber._tryNext @ mergeMap.js:135
MergeMapSubscriber._next @ mergeMap.js:118
Subscriber.next @ Subscriber.js:95
ScalarObservable._subscribe @ ScalarObservable.js:51
Observable._trySubscribe @ Observable.js:172
Observable.subscribe @ Observable.js:160
MergeMapOperator.call @ mergeMap.js:92
Observable.subscribe @ Observable.js:157
FilterOperator.call @ filter.js:61
Observable.subscribe @ Observable.js:157
MapOperator.call @ map.js:57
Observable.subscribe @ Observable.js:157
CatchOperator.call @ catchError.js:80
Observable.subscribe @ Observable.js:157
ajax @ list-church.component.ts:56
ua @ VM2385:73
Vb @ VM2385:170
(anonymous) @ VM2385:171
iterator @ VM2385:163
(anonymous) @ VM2385:171
(anonymous) @ VM2385:165
(anonymous) @ list-church.component.ts:107
SafeSubscriber.__tryOrUnsub @ Subscriber.js:243
SafeSubscriber.next @ Subscriber.js:190
Subscriber._next @ Subscriber.js:131
Subscriber.next @ Subscriber.js:95
Subscriber._next @ Subscriber.js:131
Subscriber.next @ Subscriber.js:95
MapSubscriber._next @ map.js:85
Subscriber.next @ Subscriber.js:95
FilterSubscriber._next @ filter.js:90
Subscriber.next @ Subscriber.js:95
MergeMapSubscriber.notifyNext @ mergeMap.js:151
InnerSubscriber._next @ InnerSubscriber.js:25
Subscriber.next @ Subscriber.js:95
onLoad @ http.js:2270
ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.js:4740
ZoneDelegate.invokeTask @ zone.js:420
Zone.runTask @ zone.js:188
ZoneTask.invokeTask @ zone.js:496
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566
error (async)
customScheduleGlobal @ zone.js:1666
ZoneDelegate.scheduleTask @ zone.js:407
onScheduleTask @ zone.js:297
ZoneDelegate.scheduleTask @ zone.js:401
Zone.scheduleTask @ zone.js:232
Zone.scheduleEventTask @ zone.js:258
(anonymous) @ zone.js:1831
(anonymous) @ http.js:2355
Observable._trySubscribe @ Observable.js:172
Observable.subscribe @ Observable.js:160
subscribeToResult @ subscribeToResult.js:23
MergeMapSubscriber._innerSub @ mergeMap.js:138
MergeMapSubscriber._tryNext @ mergeMap.js:135
MergeMapSubscriber._next @ mergeMap.js:118
Subscriber.next @ Subscriber.js:95
ScalarObservable._subscribe @ ScalarObservable.js:51
Observable._trySubscribe @ Observable.js:172
Observable.subscribe @ Observable.js:160
MergeMapOperator.call @ mergeMap.js:92
Observable.subscribe @ Observable.js:157
FilterOperator.call @ filter.js:61
Observable.subscribe @ Observable.js:157
MapOperator.call @ map.js:57
Observable.subscribe @ Observable.js:157
CatchOperator.call @ catchError.js:80
Observable.subscribe @ Observable.js:157
(anonymous) @ list-church.component.ts:94
(anonymous) @ SmartNotification.min.js:2
dispatch @ jquery.js:5183
elemData.handle @ jquery.js:4991
ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.js:4740
ZoneDelegate.invokeTask @ zone.js:420
Zone.runTask @ zone.js:188
ZoneTask.invokeTask @ zone.js:496
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566

kthorngren · July 2018

Maybe the issue is the return statement in your columns.render function. It should be a string enclosed by single quotes.

Kevin

ronaldrenteria · July 2018

Thanks @kthorngren, but I think that is not the problem since the definition of the columns I have the definition in single quotes.

columns: [
{data: 'name'},
{data: 'foundation_date'},
{data: 'address'},
{data: 'phone'},
{data: 'mail'},
.......
]

kthorngren · July 2018

I would start by seeing what is at this line:

ERROR TypeError: c is not a function
at HTMLTableElement.eval (eval at module.exports (addScript.js:27), <anonymous>:170:352)

Can you tell us what that line is?

Kevin

Update Data (Rows) in SmartAdmin

Update Data (Rows) in SmartAdmin

Answers

Howdy, Stranger!

Categories

DataTables

Update Data (Rows) in SmartAdmin

Update Data (Rows) in SmartAdmin

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables