2015-12-30 4 views
3

Я пытаюсь использовать данные на моем веб-сайте, но после того, как я добавлю все на свой веб-сайт, он не отображает вещь, подобную шаблону, который я видел. Это шаблон enter image description here И это дело я получил enter image description hereDatatables, не показывающий кнопку для подробностей

я имею в виду, я не могу видеть кнопку плюс, так что я не могу видеть детали продукта. Эта кнопка просто показать, когда я сделать браузер становится меньше, как это, но мне нужно, что даже когда браузер велик, как в шаблоне enter image description here

Есть ли у вас какие-либо идеи, пожалуйста, помогите? Это шаблон, который я следую: https://datatables.net/extensions/responsive/examples/display-types/foundation-modal.html Это мой сценарий:

$(document).ready(function() { 
$('#example').DataTable({ 
    responsive: { 
     details: { 
      display: $.fn.dataTable.Responsive.display.modal({ 
       header: function (row) { 
        var data = row.data(); 
        return 'Details for '+data[0]+' '+data[1]; 
       } 
      }), 
      renderer: function (api, rowIdx, columns) { 
       var data = $.map(columns, function (col, i) { 
        return '<tr>'+ 
          '<td>'+col.title+':'+'</td> '+ 
          '<td>'+col.data+'</td>'+ 
         '</tr>'; 
       }).join(''); 

       return $('<table width="100%"/>').append(data); 
      } 
     } 
    } 
}); 

});

+0

Пожалуйста, помогите! –

+0

Вы должны показать свой код –

+0

Я действительно добавил свой сценарий, вы можете мне помочь? –

ответ

0

Возможно, причина не в «javascript». Вы можете проверить свой html или css, используя сравнение двух ваших изображений, ваша структура structrue должна иметь некоторые проблемы, а когда окно браузера больше, вы можете f12 увидеть эти код существует:

table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before { 
    top: 8px; 
    left: 4px; 
    height: 16px; 
    width: 16px; 
    display: block; 
    position: absolute; 
    color: white; 
    border: 2px solid white; 
    border-radius: 16px; 
    box-shadow: 0 0 3px #444; 
    box-sizing: content-box; 
    font-family: 'Courier New', Courier, monospace; 
    text-indent: 4px; 
    line-height: 16px; 
    content: '+'; 
    background-color: #008CBA; 

}

обусловленно кода определяет существование этого button.Hope он может помочь вам! как это: enter image description here

+0

, вы имеете в виду, что я должен поместить свой код в div и сделать размер для этого div по css правильно? –

+0

Нет, beacause вы используете datatable, эти css содержат ваше введение.eg:"https://cdn.datatables.net/responsive/2.0.0/css/responsive.foundation.min.css". Вам просто нужно «f12 «проверить эти элементы существует. – Anan

+0

его не существует в моем коде, или, может быть, я просто свяжу css с онлайн-страницей –

1

Для тех, кто до сих пор находит это в 2018 году

Я узнал этот вопрос с моими «плюс» кнопки не отображаются (когда в реагирующом мобильном зрении) потому, что они добавляются к «первому ребенку» строки, поэтому, если строка, отличная от первой, получает ответный приоритет над этой строкой, тогда кнопка исчезает вместе с ней.

Смежные вопросы