Selectable table not selecting rows

Topic: Selectable table not selecting rows

cfo64nc pro asked 5 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 5 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 5 years ago

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

Add comment

Piotr Glejzer staff answered 5 years ago

0 0 Best answer

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.

<pre class="prettyprint"><code>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');
</code></pre>

And it will be work. Check these photos. 
<a href="https://ibb.co/yyr7y2f" target="_blank" rel="nofollow">https://ibb.co/yyr7y2f</a> 
<a href="https://ibb.co/FmpfwSW" target="_blank" rel="nofollow">https://ibb.co/FmpfwSW</a> 
<a href="https://ibb.co/8KNmDd4" target="_blank" rel="nofollow">https://ibb.co/8KNmDd4</a> 
Best, Piotr

Please insert min. 20 characters.

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

Add comment

Piotr Glejzer staff answered 5 years ago

1 0 Best answer

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!

Add comment

cfo64nc pro answered 5 years ago

1 0 Best answer

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 free 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

Add comment

Closed

This topic is closed.

FREE CONSULTATION

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

Status

Closed

Specification of the issue

ForumUser: 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

cfo64nc

Pro User 84Support score
4Questions 6Answers 3Snippets