Answers

• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  January 2023

  Hi,

  Just checking I understand the question correctly first - if we take the row which has:

                          Accent
                          Journey
                          Patriot
  

  you want each of those to be its own entry in the "Modal" pane. Is that correct?

  If so, you need to basically do the same as you have done for the make and the year - list each option individually. Is the problem that you want it done automatically?

  If so, there are two way to do it:

  1. Populate a Javascript array from Django which you can then loop over to create the options array for SearchPanes, or
  2. Use Javascript to scan over the column before the DataTable is initialised, and get all the models. Bin them into an array and then use that array to create the options array for SearchPanes.

  Allan
• polow Posts: 7Questions: 2Answers: 0

  January 2023 edited January 2023

  Thank you Allan,

  Everything works as expected when assigning one car make/model to a single part, things get complicated if i assigned multiple car maker/models to a single part.

  For example part #5 in the table is assigned to 3 different car maker/models but when searchpanes render the column it's treating both make/model rows as a single line values, i am trying to separate them individually.

  

  I am trying to avoid creating individual custom searchpanes and make it auto render them.

  If you can give examples for your suggestion num1 and num2.

  Thank you
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  January 2023

  Assuming you have an array of data from Django somehow, then you would do something like:

  myArray.map(d => ({
    label: d,
    value: function (rowData, rowIdx) {
     return rowData[...].includes(d);
    },
    className: d
  }))
  

  You'd need to enter in the rowData index, but you could perhaps wrap this in a function so you can just pass in the column index and reuse the function for the various columns.

  Allan
• polow Posts: 7Questions: 2Answers: 0

  January 2023

  Thank you Alla,

  So i made a table specificly for each car in this example :
  Toyota row number 12
  Kia row number 13
  etc ...

  Regarding the Year i used row 11 which has all the compatible cars "didn't know how else i can obtain the years since this requires to create a year for each car".

  This is how i did so far :

                                  header: 'Year',
                                  options: [
                                      {
                                          label: '2000',
                                          value: function(rowData, rowIdx) {
                                          console.log(rowIdx)
                                              return rowData[11].includes('2000');
                                          },
                                          className: '2000'
                                      },
                                      {
                                          label: '2015',
                                          value: function(rowData, rowIdx) {
                                              return rowData[11].includes('2015');
                                          },
                                          className: '2015'
                                      },
  
  
                                  ],
                                  dtOpts: {
                                      searching: false,
                                      order: [[0, 'asc']]
                                  }
                              },
  
  
                              {
                                  header: 'Make',
                                  options: [
                                      {
                                          label: 'Toyota',
                                          value: function(rowData, rowIdx) {
                                              return rowData[12].includes('Toyota');
                                          },
                                          className: 'Toyota'
                                      },
                                      {
                                          label: 'Dodge ',
                                          value: function(rowData, rowIdx) {
                                              return rowData[15].includes('Dodge ');
                                          },
                                          className: 'Dodge '
                                      },
                                  ],
                                  dtOpts: {
                                      searching: false,
                                      order: [[0, 'asc']]
                                  }
                              },
  
                              {
                                  header: 'Model',
                                  options: [
                                      {
                                          label: 'Tundra',
                                          value: function(rowData, rowIdx) {
                                              return rowData[12].includes('Tundra');
                                          },
                                          className: 'Tundra'
                                      },
                                      {
                                          label: 'Journey',
                                          value: function(rowData, rowIdx) {
                                              return rowData[15].includes('Journey');
                                          },
                                          className: 'Journey'
                                      },
  
  
                                  ],
                                  dtOpts: {
                                      searching: false,
                                      order: [[0, 'asc']]
                                  }
                              },
  
  

  But there's something wrong here
  
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  January 2023

  I'm not actually clear on what is wrong from there image there. Can you update your test case plase?

  Thanks,
  Allan
• polow Posts: 7Questions: 2Answers: 0

  January 2023

  When i click Jeep the model pane should hide all other models except the one who belong to jeep only.
• polow Posts: 7Questions: 2Answers: 0

  January 2023

  Okay here's an update to my test case :
  https://jsbin.com/nasoyicule/edit?html,output

  Please note there's a hidden row which is row number 11 that has all the compatible cars in this format "Year\Make\Model\Trim\Engine".

  I can get this issue fixed if i can use this function to check more than one rowData, for example :

                                      {
                                          label: '2015',
                                          value: function(rowData, rowIdx) {
                                          if (rowData[13].includes('2015') && rowData[14].includes('2015'))
                                              return rowData[12].includes('2015');
                                          },
                                          className: '2015'
                                      },
  
• polow Posts: 7Questions: 2Answers: 0

  January 2023

  Because the test examples hosted on live.datatable site was not working for me for weeks now i found what i was looking for after using the incognito mode in browsers to look for examples.

  This solved my problem
  https://datatables.net/forums/discussion/62304