Selectable table not selecting rows

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Selectable table not selecting rows

cfo64nc pro asked 6 years ago

Expected behavior

row being selected in table on click.

Actual behavior

row is not selected

Resources (screenshots, code snippets etc.)

Note, I'm using 4.7.6 MDBootstrap, but it wasn't listed above so I picked 4.7.5. Sample html and json files on my Dropbox (Link)

Piotr Glejzer staff commented 6 years ago

Hi, I can't copy your json file, even If I am logged in to Dropbox. We don't use extensions buttons in our data tables.

https://imgur.com/a/3uS3Une

Check this photo, I tested with static HTML file and it's working.

cfo64nc pro commented 6 years ago

Try this link https://gist.github.com/ilovetogetspamed/26fdb5cacc70f3a806841e294d0cb1b6 I apologize for dropbox not working for you.

Piotr Glejzer staff answered 6 years ago

Hi,
So, the main problem with your topic is the fact that you can't use mdb editor with JSON file? So If this is the main problem there is a fix for that. You have to add mdbEditor() initiate function to $('document').ready like that.

let myJasonData = $.getJSON("example.json", function (data) {
  // console.log('Columns: ' + data.columns);
  $.each(data.columns, function (key, value) {
    // Get the table header column titles
    // console.log(key);
    // console.log(value);
    let thItems = [];
    thItems.push("<th>" + value["title"] + "</th>");
    // console.log(thItems);
  });
  // Get the data
  // console.log('Data: ' + data.data);
});
// test returned data....

// This populates the table header and data
$(document).ready(function () {
  $('#dtWorkorders').DataTable({
    data: myJasonData.responseJSON.data,
    columns: myJasonData.responseJSON.columns
  });

  $('#dtWorkorders').mdbEditor({
    modalEditor: true
  });
});

$('.dataTables_length').addClass('bs-select');

And it will be work. Check these photos.
https://ibb.co/yyr7y2f
https://ibb.co/FmpfwSW
https://ibb.co/8KNmDd4
Best,
Piotr

cfo64nc pro answered 6 years ago

My trouble is in the row's are not being selected. So I cant edit or delete rows. Also, adding rows isn't working. Modal pops up but row is not inserted.

I've tried with both Safari and Chrome.

See video at https://vimeo.com/329784994

Ozgun YILMAZ commented 4 years ago

I have same problem with mdbootstrap table editor. It can’t be selected and so not be inserted et deleted.please help

Grzegorz Bujański staff commented 4 years ago

Hi. Please paste your code that doesn't work for you. I'll check what's going on.

cfo64nc pro commented 4 years ago

https://gist.github.com/ilovetogetspamed/26fdb5cacc70f3a806841e294d0cb1b6 is the code as far as I can remember.

Grzegorz Bujański staff commented 4 years ago

I check our documentation and I don't see an example anywhere that looks similar to yours. Did you find it on our website? Can you send a link? It looks like you want to use datatable with this example: https://mdbootstrap.com/docs/jquery/tables/additional/#table-with-panel and wanted an effect similar to this example: https://mdbootstrap.com/plugins/jquery/table-editor/#r-editor

Piotr Glejzer staff answered 6 years ago

Did you try use this code? MDB Editor initiate function should be inside $(document).ready(..).

$(document).ready(function () {
  $('#dtWorkorders').DataTable({
    data: myJasonData.responseJSON.data,
    columns: myJasonData.responseJSON.columns
  });

  $('#dtWorkorders').mdbEditor({
    modalEditor: true
  });
});

Thanks for a video!

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Closed

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.7.5
  • Device: iMac
  • Browser: Safari
  • OS: OSX Mojave
  • Provided sample code: No
  • Provided link: Yes
About author
cfo64nc
Pro User
84Support score
4Questions 6Answers
0Snippets likes 3Snippets