Answers

• colin Posts: 15,144Questions: 1Answers: 2,586

  October 2020

  We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

  Cheers,

  Colin
• kthorngren Posts: 20,302Questions: 26Answers: 4,769

  October 2020

  Styling issues are near impossible to troubleshoot without seeing the problem. Can you build a test case showing the issue?
  https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

  Maybe you can use the browser's inspector tool to find out where the display: none style is coming from.

  Kevin
• Alex99 Posts: 24Questions: 1Answers: 0

  October 2020

  hi Colin and kthorngren ,
  i tried the link you sent but i'm using php and the website doesn't allow me to insert php code. i'm also using an ajax request. what can i do?
• Alex99 Posts: 24Questions: 1Answers: 0

  October 2020

  both page use the same css, i tried to not include the css file , but it still don't working...this happens only in one page , in the other work all correctly
• kthorngren Posts: 20,302Questions: 26Answers: 4,769

  October 2020

  Did you use the browser's inspector tool to track down where display: none is coming from?

  Kevin
• Alex99 Posts: 24Questions: 1Answers: 0

  October 2020

  yes, this is what happens in the page that doesn't work, is the code paart of plugin input

  <div class="dataTables_paginate paging_input" id="Impaginazione_200_paginate" style="display: none;"> <span class="first paginate_button" id="Impaginazione_200_first">Inizio</span> <span class="previous paginate_button margin-r-10" id="Impaginazione_200_previous"> <i class="icon-double-angle-left"></i></span> <span> <span class="margin-l-10">Pagina</span> </span> <input class="paginate_input" type="text"> <span> di </span> <span class="paginate_total"></span> <span style="margin-left:10px;"> </span> <span class="next paginate_button" id="Impaginazione_200_next"> <i class="icon-double-angle-right"></i> </span> <span class="last paginate_button" id="Impaginazione_200_last">Fine</span> </div>
• kthorngren Posts: 20,302Questions: 26Answers: 4,769

  October 2020

  Right click in the area where paging would be placed and select Inspect. Click on the <div class="dataTables_paginate paging_input" id="Impaginazione_200_paginate" style="display: none;"> in the developer tools and look at the Styles applied. Can you find where the display: none is being applied from?

  Do you have some Javascript code on the page hiding the paging element?

  What happens if you comment the line "pagingType": "input",? Do you see the paging element?

  Kevin
• Alex99 Posts: 24Questions: 1Answers: 0

  October 2020

  The display: none is being applied from
  element.style { display: none; }

  Do you have some Javascript code on the page hiding the paging element?

  I have only scripts to run Datatables and all the extension i need, and the plugin code

  What happens if you comment the line "pagingType": "input",? Do you see the paging element?

  Yes
• kthorngren Posts: 20,302Questions: 26Answers: 4,769

  October 2020

  See if this SO Thread helps you further dig into the element.style to see where the style is coming from.

  Kevin
• Alex99 Posts: 24Questions: 1Answers: 0

  October 2020

  I tried, it shows nothing, here is the screen of what i see:

  
• kthorngren Posts: 20,302Questions: 26Answers: 4,769

  October 2020

  You don't have something like this in your code?

   $('.dataTables_paginate').css('display', 'none');
  

  Maybe someone else can help but I'm out of ideas without actually seeing the page or a test case with the problem.

  Kevin
• Alex99 Posts: 24Questions: 1Answers: 0

  October 2020

  no, these are the style of .datables_paginate i have overwritten

  .dataTables_paginate {
      margin: 5px !important;
  }
  
  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
      color: #2283c5 !important;
      border: 1px solid #e0e8eb !important;
      background: #fafafa !important;
      border-radius: 0 !important;
      margin: 0px !important;
  }
  
  .dataTables_wrapper .dataTables_paginate .paginate_button {
      margin-left: -0.5px !important;
      margin-right: -0.5px !important;
  }
  
  .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
      background-color: #6faed9 !important;
      border-color: #6faed9 !important;
      color: #FFF !important;
      text-shadow: 0 -1px 0 rgba(0,0,0,0.25) !important;
  }
  
  .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
      color: #2283c5 !important;
      border: 1px solid #e0e8eb !important;
      background-color: #e0e8eb !important;
  }
  

  As you can see there isn't that style.

  Maybe, i don't know, is a case of the plugin?
• kthorngren Posts: 20,302Questions: 26Answers: 4,769

  October 2020

  I opened the CDN link and searched for the word none. Didn't find any.

  My question was more about hiding the paging input in Javascript.

  Since we can't find the source of the style maybe you can override it using initComplete and use $('.dataTables_paginate').css('display', 'block'); in the function.

  Kevin
• Alex99 Posts: 24Questions: 1Answers: 0

  October 2020

  hi,

  it works, but...it's without values

  
• kthorngren Posts: 20,302Questions: 26Answers: 4,769

  October 2020

  it works, but...it's without values

  Please build a test case showing the issue so we can help debug.
  https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

  Kevin