How to Create DataTable's Pagination Link Custom designs and change it's Default Place in DOM.

maulikDave

In My Datatable I changed "pagingType": "simple", So I Got Previous and Next Links, Now I want two imaged Corresponds to each link so I add the following in my code ...

 oLanguage: {
                oPaginate: {
                    sNext: '<span><img src="/images/next-arrow.svg"/></span>',
                    sPrevious: '<span><img src="/images/previous.svg"/></span>'
                }
            }

Now I am getting the Following Result...

Now I wanted to Remove The border around Links and no space between them , and also it will be good if I can change the place of links.

Can anyone help me with this?

kthorngren

Now I wanted to Remove The border around Links and no space between them

Do the SVG images contain the border?

it will be good if I can change the place of links.

Use the dom option.

Kevin

maulikDave

No Imaged Doesn't Contain Borders

kthorngren

I built this simple test case with downloaded paging icons. They don't have a border and they are next to each other. By next to each other the PNG images are next to each other but there is white space within the PNG image. A different PNG image without borders will need to be used for arrows to be next to each other.
http://live.datatables.net/gajepoga/1/edit

If your SVG images don't have the border in the image then you have a CSS that is applying it. If there is not white space in the SVG images then CSS will be needed to move them next to each other. You can right click on the images to fine the applied CSS and learn what is needed to make the changes you want. If you need help with this then please post a link to your page or a test case replicating the arrows to so we can take a look.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

maulikDave

Thanks For Help, Instead I created Custom paging and it is creating other issues,
can you please look at that ?

https://datatables.net/forums/discussion/63394/datatables-serverside-processing-not-working-with-custom-paging-in-asp-net-core/p1?new=1