Выровнять текст в данных добавления Javascript - PullRequest
0 голосов
/ 23 сентября 2018

Я буду очень признателен за любую помощь.Я пытаюсь исправить отображение текста в моем HTML.Я использую javascript и вызываю переменную и отображаю в html.Однако отображение текста не то, что я хотел.

JAVASCRIPT

$(document).ready(function(){  
      var table= $('#data-table').DataTable({  

           "ajax"     :     "employee_data.json",  
           "columns"     :     [  
                {     "data"     :     "name"     },  
                {     "data"     :     "gender"},  
                {     "data"     :     "designation"},
                {     "data"     :     "image"},    
            {"defaultContent":  '<div style="text-align:center"><button style="width:100%; margin-top: 5px;"  class="btn btn-danger" > support </button></div>'}                     
           ]  

      });
       $('#data-table tbody').on( 'click', 'button', function () {

        var data = table.row( $(this).parents('tr') ).data();
        alert( "You Click" + " "+data['name'] );
        $new="You Click" + " "+data['name'] ;

        $images=data['image'];

        $names=document.getElementById("name").append = data['name'];
                $gender=document.getElementById("gender").append = data['gender'];
                $('#img-container').append(data['image']+" " + $names+$gender+" </p>"+"<br>" );

    } );



 }); 

Результат выполнения: Please see

Желаемый выход: Desired Output

1 Ответ

0 голосов
/ 23 сентября 2018

Попробуйте изменить свой стиль, используя эту единицу измерения, чтобы она реагировала на размеры.

$(document).ready(function() {  
    var table= $('#data-table').DataTable( {
        "ajax"        :     "employee_data.json",  
        "columns"     :     [  
            {     "data"     :     "name"     },  
            {     "data"     :     "gender"},  
            {     "data"     :     "designation"},
            {     "data"     :     "image"},    
            {"defaultContent":  '<div style="font-size:15vw;"><button style="width:100%; margin-top: 5px;"  class="btn btn-danger"> support </button></div>'}                     
       ]  
  });
...